第5章 原型

5.1 原型属性

        function f(a,b){return a*b;};// length  属性f.length;  //2// constructor 构造属性f.constructor; // function Function() { [native code] }// prototype 属性 初始值是空对象typeof f.prototype; //"object"

5.1.1 利用原型添加方法和属性

        function f1(name,color){// 使用this添加属性this.name=name;this.color=color;this.whatAreYou=function(){return 'I am a'+this.color+''+this.name;};}// 使用prototype属性添加属性和方法f1.prototype.price=100;f1.prototype.rating=3;f1.prototype.getInfo=function (){return 'Rating: '+this.rating+',price: '+this.price;};

5.1.2 使用原型的属性和方法

        function f1(name,color){// 使用this添加属性this.name=name;this.color=color;this.whatAreYou=function(){return 'I am a'+this.color+''+this.name;};}// 使用prototype属性添加属性和方法f1.prototype.price=100;f1.prototype.rating=3;f1.prototype.getInfo=function (){return 'Rating: '+this.rating+',price: '+this.price;};var f2=new f1('webcam','black');f2.color; // "black"f2.getInfo(); //"Rating: 3,price: 100"// 修改prototype属性,由同一构造器创建的所有对象的prototype属性也都会同时发生改变(会影响在修改之前已经创建的对象)f1.prototype.get=function(what){return this[what];}f2.get('price');  // 100

5.1.4 利用自身属性重写原型属性

对象自身属性的优先级高于原型属性

       function F1(name){this.name=name;};F1.prototype.name='Alen';var f2=new F1('XiaoMing');f2.name;  // "XiaoMing"  不是 Alen// 使用hasOwnProperty()判断一个属性是自身属性还是原型属性f2.hasOwnProperty('name');  //true//删除自身属性后,原型属性才会显示delete f2.name; // truef2.name; // "Alen"

5.1.5 isPrototypeOf()方法

isPrototypeOf():当前对象是否为另一个对象的原型

        var person={like:'eat',age:12,sex:'boy'};function F1(name){this.name=name;}F1.prototype=person;var f2=new F1('Alen');// 判断person是否为f2的原型person.isPrototypeOf(f2);  //true//使用getPrototypeOf()获取原型Object.getPrototypeOf(f2)===person; //true

5.1.6 神秘的__proto__链接

5.2 扩展内建对象

内建对象的构造器函数可以通过其原型来进行扩展。

 1     <script type="text/javascript">
 2       // 示例1:扩展Array的内建函数,用来查询数组中是否存在某个特定的值
 3       Array.prototype.inArray=function(needle){
 4         for (var i = 0; i < this.length; i++) {
 5             if(this[i]===needle){
 6                return true;
 7             }else{
 8                 return false;
 9             }
10         };
11       };
12       var colors=['red','black','blue'];
13       colors.inArray('red');  //true
14       colors.inArray('green'); //false
15     //示例2:反转字符串
16     // 先利用split()将目标字符串转换成数组,然后调用该数组的reverse()方法产生一个反向数组。       // 最后通过join()方法将结果数组转换为字符串
17     String.prototype.reverse=function (){
18         return Array.prototype.reverse.apply(this.split('')).join('');
19     };
20     "bums".reverse(); //smub
21     </script>

5.2.1 关于内建对象的讨论

如果想通过原型为某个对象添加一个新属性,务必检查一下该属性是否已经存在。

5.2.2 原型陷阱

注意: 1> 当对原型对象执行完全替换时,可能会触发原型链中某种异常

2> prototype.constructor 属性不可靠

 1 <script type="text/javascript">
 2         function Dog(){
 3             this.tail=true;
 4         };
 5         var f1=new Dog();
 6         var f2=new Dog();
 7         // 仍可以为Dog()的原型添加属性,添加之前已经存在的对象也可访问新属性
 8         Dog.prototype.say=function(){
 9             return 'worf';
10         };
11         // f1、f2可以访问新方法
12         f1.say();  //"worf"
13         f2.say(); //"worf"
14         // 检查对象的构造器
15         f1.constructor === Dog; // true  正常
16         f2.constructor === Dog;// true  正常
17         Dog.prototype.constructor === Dog; // true
18
19         // 用自定义新对象完全覆盖掉原有的原型对象
20         Dog.prototype={
21             paws:4,
22             hair:true
23         };
24         // 这样原有对象不能访问新属性,但通过__proto__与原有的原型保持联系
25         f1.paws; //undefined
26         f1.say();  //"worf"
27         typeof f1.__proto__.say; // "function"
28        // 之后创建的对象室友被更新后的prototype对象
29        var f3=new Dog();
30        f3.say(); // f3.say is not a function
31        f3.tail; // true
32        f3.paws; // 4
33        // __proto__指向新的原型对象
34        f3.__proto__.hair; //true
35
36        // 新对象的constructor属性不在保持正确
37        f3.constructor;// function Object() { [native code] }
38                       // 本应该指向Dog(),现在指向Object
39        f1.constructor; //function Dog(){this.tail=true;}  仍为Dog() 不变
40        Dog.prototype.constructor; // function Object() { [native code] }
41        //重新设置constructor属性 解决
42        Dog.prototype.constructor=Dog;
43        new Dog().constructor === Dog; // true
44     </script>

转载于:https://www.cnblogs.com/zengFyzL/p/7208574.html

JavaScript面向对象编程指南(五) 原型相关推荐

  1. 「JavaScript面向对象编程指南」原型

    在 JS 中,函数本身也是一个包含了方法(如apply和call)和属性(如length和constructor)的对象,而prototype也是函数对象的一个属性 function f(){} f. ...

  2. 《javascript面向对象编程指南》读书笔记

    <javascript面向对象编程指南>读书笔记 <javascript面向对象编程指南>读书笔记 第一章 面向对象的JavaScript 第二章 基本数据类型与流程控制 变量 ...

  3. 《JavaScript面向对象编程指南》——第1章 引言1.1 回顾历史

    本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.1节,作者: [加]Stoyan Stefanov 译者: 凌杰 更多章节内容可以访问云栖社区" ...

  4. 《JavaScript面向对象编程指南》——1.3 分析现状

    本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.3节,作者: [加]Stoyan Stefanov 译者: 凌杰 更多章节内容可以访问云栖社区" ...

  5. 《JavaScript面向对象编程指南》——1.7 训练环境设置

    本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.7节,作者: [加]Stoyan Stefanov 译者: 凌杰 更多章节内容可以访问云栖社区" ...

  6. 《JavaScript面向对象编程指南》—第128页错误指正

    最近在阅读<JavaScript面向对象编程指南第2版>,感觉很有帮助.今晚发现一个小错误,想指正一下. 如图,书中第128页: 书中的第三个例子代码如下: "potato&qu ...

  7. Javascript面向对象编程指南笔记 - 第三章 - 函数

    第三章 函数 第三章 函数 3-1 什么是函数 3-1-1 调用函数 3-1-2 参数 3-2 预定义函数 3-2-1 parseInt 3-2-2 parseFloat 3-2-3 isNaN 3- ...

  8. javascript 面向对象编程(工厂模式、构造函数模式、原型模式)

    javascript 面向对象编程(工厂模式.构造函数模式.原型模式) CreateTime--2018年3月29日17:09:38 Author:Marydon 一.工厂模式 /*** 工厂模式*/ ...

  9. JavaScript 面向对象编程(二) —— 构造函数 / 原型 / 继承 / ES5 新增方法

    本篇为 JavaScript 进阶 ES6 系列笔记第二篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 : Javascript 继承机制的 ...

最新文章

  1. Ubuntu下编译并运行C++代码
  2. 【经验】网络加速:pip
  3. 2020年虚拟现实和增强现实的发展趋势将会如何|0glasses低调分享
  4. 多线程下使用Jedis
  5. Js中清空文件上传字段(input type=file )
  6. Retrofit网络请求参数注解,@Path、@Query、@Post、Body等总结(超级实用)以及以Json格式和form-data格式提交数据
  7. 技术QA:如何安装并启用BITS和WebDAV?
  8. 我,27岁,程序员,今年无情被辞:该转行还是降薪和年轻人抢饭碗?
  9. vue中配置不同的代理同时访问不同的后台
  10. Mysql中,int(10)和int(11)的区别
  11. linux下安装nginx1.10,Linux(RHEL7.0)下安装Nginx-1.10.2
  12. Mr.Alright---安卓N系统最近任务锁定功能实现
  13. 优酷网(Youku.com)架构经验
  14. 微信开发之网页返回关闭浏览器
  15. 圣思园——Java SE Lesson 6
  16. js中的遍历和jquery中的遍历
  17. java 地铁费_通过java程序模拟实现地铁票价2+2=12
  18. 一颗椰子糖机器人_“媒体训练营”走进海南春光 聆听椰子糖诞生故事
  19. 022kuo_zhan_guan_li_qi
  20. CRM系统帮助企业省时省力

热门文章

  1. Tomcat8.0.21登录时忘记用户名和密码
  2. treeview右键添加新节点
  3. H264视频通过RTMP直播
  4. [转载]全面解读软件版本的标志
  5. ESLint 规则详解
  6. LVDS DP等显示器接口简介
  7. 腾讯云 Centos 配置 JDK Tomcat Mysql
  8. centos linux 系统日常管理4 scp,rsync,md5sum,sha1sum,strace ,find Rsync 常见错误及解决方法 第十七节课...
  9. 2008年CCNA第二学期第九单元题目(2008-12-14 14:04:38)
  10. Linux下C++ UDP Socket例子