请选择 进入手机版 | 继续访问电脑版

网络科技

    今日:379| 主题:272599
收藏本版
互联网、科技极客的综合动态。

[其他] JavaScript原型链深入理解

[复制链接]
つ請繼續關注 发表于 2016-11-30 18:58:44
181 5

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在JS中,原型链是一个重要的概念,不管是继承还是属性值的查找中,都用到了原型链的基本知识,有些朋友经常问我一些关于原型链的问题,今天整理一下自己对原型链的理解,下次我就不用在去解释了,直接看文章。
   首先,大家都知道在JS中有六种 基本数据 类型和一种 复杂类型
  六种基本数据类型:
  
       
  • String   
  • Number   
  • Boolean   
  • null   
  • undefined   
  • Symbol(ES2015新加入,解决属性名的冲突问题。 详情 )  
   另外一种复杂类型自然而然就是 Object ,有的人也说JS中 一切皆是对象 。上面的六种基本数据类型中,除了null和undefined没有构造函数外,其他4种都对应有其构造函数对象,有时利用这些构造函数可以强制转换数据类型。
   要想讲清楚原型链的一些问题,还有一个特殊的Object对象必须事先说清楚,那就是 Function 对象。它也是对象,只不过比其他普通对象复杂点罢了。
  组合继承

  首先我们先写一个大家熟悉的组合继承(原型链+构造函数),然后根据这个组合继承去了解原型链到底是怎样连接起来的。
  1. //父类
  2. functionPerson(name,age){
  3. if(thisinstanceofPerson){
  4. this.name = name;
  5. this.age = age;
  6. }else{
  7. Person.call(this,name,age);
  8. }
  9. }
  10. Person.prototype.say = function(){
  11. console.log('我叫'+this.name +',今年'+this.age +'岁了!')
  12. }
  13. //子类
  14. functionStudent(name,age,gride){
  15. if(thisinstanceofStudent){
  16. Person.call(this,name,age);
  17. this.gride = gride;
  18. }else{
  19. Student.call(this,name,age,gride);
  20. }
  21. }
  22. Student.prototype = newPerson();
  23. Student.prototype.constructor = Student;
  24. Student.prototype.say = function(){
  25. console.log('我叫'+this.name +',今年'+this.age +'岁了,考试考了'+this.gride +'分!');
  26. }
  27. varstu =newStudent('chping',23,100);
  28. stu.say();
复制代码
  此时会输出 我叫chping,今年23岁了,考试考了100分! ,这说明我们的组合继承就实现了,下面可以根据这个例子逐句解释一下原型链的相关问题,顺便讲解这个组合继承了。
  第一个问题:安全使用构造函数

   首先可能你对 PersonStudent 里面的那个判断有些疑问,你可能是下面这样写构造函数:
  1. functionPerson(name,age){
  2. this.name = name;
  3. this.age = age;
  4. }
复制代码
  不这样写,主要是 防止构造函数被执行 ,因为一旦构造函数执行,其内的属性值会被挂载到window上面去了(当构造函数执行的时候,里面的 this 是指向window的)。
  好的,这个问题解决了,在看第二个问题。
  第二个问题:prototype对象

  接着我们来体会一下下面这句话:
  每一个函数对象都有一个prototype属性,该属性指向其prototype对象。

  这句话相信你已经听了很多遍了,可能并不是这样说的,但是就是这么个意思。那么这句话应该怎么理解呢?
   其实也不难,先看前半部分 每一个函数对象都有一个prototype属性 。这半句就是说 函数对象 默认有一个属性,这个属性叫 prototype 。另外,函数对象就是指用 function 声明的对象(补充一下:在ES2015之前,有两种声明变量的方式, function 用来声明函数变量, var 用来声明普通变量。但是在ES2015中新加了 letconst )。
      再看一下后半部分 该属性指向其prototype对象 。后半句的意思就是说 prototype 属性指向的是一个也叫 prototype 的对象,该对象是随着函数对象而产生的。也就是说,只要通过 function 定义一个函数对象,就会生成一个 prototype对象 ,并在函数上生成一个 prototype属性 来指向该 prototype属性 。用图来表示一下就是下面的样子:
   

JavaScript原型链深入理解

JavaScript原型链深入理解-1-网络科技-undefined,Object,null,文章
   ;
     从图中你可以看到还有一个知识点,就是 prototype对象 中还有一个 constructor 对象,该对象又指向了构造函数,这也是一个需要注意的知识点,后面我们在展开来说,这里先记一下。
     通过上面的这句话,我们可以联想到,Object好像也是一个构造函数,Function好像也是一个函数,他们是不是也是这样的呢?回答是肯定的,他们也是这样的。如下图:
   

JavaScript原型链深入理解

JavaScript原型链深入理解-2-网络科技-undefined,Object,null,文章
   ;
   

JavaScript原型链深入理解

JavaScript原型链深入理解-3-网络科技-undefined,Object,null,文章
   ;
    第三个问题: __proto__ 属性

   先说明一下, __proto__ 的写法是前后各两个英文输入法下的下划线,不是一个。
  然后我们再来看这样一句话:
  每一个对象都有一个__protto__属性,该属性指向创建这个对象的构造函数的prototype对象。

   这句话稍微有点绕,我再来解释一下这句话。这句话的前半部分比较好理解,就是说JS中的每一个对象都有一个属性,这个属性的名字叫做 __proto__ ,还要再说的话,就是注意 JS中一切皆是对象 这句话。
  这句话后半部分有点绕,我们把它分成两句话去理解:
  
       
  • 创建这个对象的构造函数   
  • 的prototype对象  
  这样就明白了,但是创建这个对象的构造函数怎么确定呢?这是个问题,不好解释,我也解释不好。就总结一下:
  
       
  •   function定义的函数对象的 __proto__ 属性指向Function对象的prototype对象  。   
  •   非function定义的对象的 __proto__ 属性指向创建它的构造函数的prototype对象  。(就是都指向Object的prototype对象)   
  • Object的prototype对象的 __proto__ 指向null 。  
  还是看图吧:
   

JavaScript原型链深入理解

JavaScript原型链深入理解-4-网络科技-undefined,Object,null,文章
;
   相信通过图你已经看懂了 __proto__ 属性的指向问题了。
  思考组合继承

  1. //父类
  2. functionPerson(name,age){
  3. if(thisinstanceofPerson){
  4. this.name = name;
  5. this.age = age;
  6. }else{
  7. Person.call(this,name,age);
  8. }
  9. }
  10. //上面通过function声明了一个函数对象,那么该对象的肯定有一个prototype属性,
  11. //并且指向其prototype对象。我们可以打印验证一下
  12. console.log(Person.prototype);
  13. /*打印结果如下
  14. {
  15. constructor: function Person(name,age)
  16. arguments:null
  17. caller:null
  18. length:2
  19. name:"Person"
  20. prototype:Object
  21. __proto__:function()
  22. ,
  23. __proto__: Object
  24. }
  25. */
复制代码
  这说明 prototype对象 就是一个空对象添加了一个 constructor属性
   另外,也看到了 prototype 对象有一个 __proto__ 属性,指向Object,先记住。
   此外,我们也看到了 constructor 指向的Person函数确实存在prototype属性和 __proto__ 属性,以及其指向问题,我们同时也可以打印验证一下:
  1. console.log(Person.prototype.constructor === Person);//true
  2. console.log(Person.prototype.__proto__===Object.prototype);//true
  3. console.log(Person.__proto__===Function.prototype);//true
复制代码
  我们再来验证一下 ObjectFunction 的prototype属性,constructor属性还有 __proto__ 属性
  1. console.log(Object.prototype);
  2. console.log(Object.prototype.constructor ===Object);//true
  3. console.log(Object.prototype.__proto__ ===null);//true
  4. console.log(Object.__proto__ ===Function.prototype);//true
  5. console.log(Function.prototype);
  6. console.log(Function.prototype.constructor ===Function);//true
  7. console.log(Function.prototype.__proto__ ===Object.prototype);//true
  8. console.log(Function.__proto__ ===Function.prototype);//true
复制代码
OK,相信大家对原型链有了一定了解了。我们接着往下看。
  1. Person.prototype.say = function(){
  2. console.log('我叫'+this.name +',今年'+this.age +'岁了!')
  3. }
  4. `
复制代码
  在Person的 prototype对象 上添加了一个say方法,和给普通对象添加方法并没有区别,只不过在稍后使用的时候才会展现出它的与众不同。
  接下来是Student类:
  1. functionStudent(name,age,gride){
  2. if(thisinstanceofStudent){
  3. Person.call(this,name,age);
  4. this.gride = gride;
  5. }else{
  6. Student.call(this,name,age,gride);
  7. }
  8. }
复制代码
  在此时,Student和Person以 Person.call(this,name,age); 这一句代码产生了联系,此时Student仅仅是通过构造函数继承的方式调用了Person,这并不是本文重点,我们此时可以认为原型链上Student和Person并没有任何联系,让它们在原型链上产生联系的是下面这条语句。
  1. Student.prototype = newPerson();
  2. Student.prototype.constructor = Student;
复制代码
我们来想想这两条语句都干了啥?
   首先我们知道,Student函数对象在被 function 声明的时候已经生成了其 prototype 对象,并且通过 prototype属性 建立了联系。
   这里的第一条语句居然是, 改变了Student函数对象的prototype属性指向,不再指向function声明时自动生成的prototype对象,而是指向Person函数对象的一个实例对象。 让我们用图展示一下,就成了下面这样:
   

JavaScript原型链深入理解

JavaScript原型链深入理解-5-网络科技-undefined,Object,null,文章
;
   OK,原型链继承就这样实现了。但是由于我们让 Student 函数对象的 prototype 属性重新指向了一个 Person 函数对象的实例,而这个实例对象里面是不可能有 constructor 属性的,自然也不会指向 Student (为什么没有呢?前面已经说了,因为只有用 function 声明函数对象的时候,自动生成的 prototype对象 中才默认有 constructor属性 ,其他对象不会有)。
  接下来就是在Student函数对象新指向的prototype对象上添加say方法:
  1. Student.prototype.say = function(){
  2. console.log('我叫'+this.name +',今年'+this.age +'岁了,考试考了'+this.gride +'分!');
  3. }
复制代码
这个就没有说的必要了,就是在对象上加了一个方法,只不过这个对象有些特别罢了。然后就是通过Student构造函数来生成实例:
  1. varstu =newStudent('chping',23,100);
  2. stu.say();
复制代码
此时,我们还是要看看这两句干了啥?
   先看第一句, new Student('chping',23,100); ,其中我们必须先得知道关键字 new 做了什么:
  1. functionPerson(name,age){
  2. this.name = name;
  3. this.age = age;
  4. }
  5. 0
复制代码
这样相信你就明白,第一句干的活了:
  
       
  • 首先创建一个空对象。   
  • 将属性挂载到该空对象上。   
  • 将空对象的 __proto__ 属性连接到Student函数对象的prototype对象上,来生成原型链。   
  • 返回该对象给stu变量。  
   接下来就是第二句 stu.say() ,这句话的意思就是 stu实例 对象调用 say方法 ,但是在查找的时候发现, stu实例 对象上并没有这个方法,于是 原型链 就来了。此时他会根据其 __proto__ 属性来查找 Student 函数对象的 prototype对象 上有没有 say方法 ,然后它发现正好有一个 say方法 ,于是就可以执行该方法了。
   此时又产生一个问题,在执行Student函数对象的prototype上的say方法时,里面的 this 指向谁呢?
   可以想一下,此时 say 方法是被谁调用的,很明显是 stu 实例对象,所以 this 指向 stu ,所以, this.name 、 this.age 、 this.gride 就是实例对象 stu 上面的 chping 、 23 、 100 了。
     下面我们再来看一下完整的原型链继承的图解,如果你能完全看懂这张图,那么你对原型链的理解也就差不多了。
   

JavaScript原型链深入理解

JavaScript原型链深入理解-6-网络科技-undefined,Object,null,文章
   ;
    结语

  原型链的基础知识差不多通过上面这个例子就介绍完了,我们来总结一下:
  
       
  • 每一个函数对象都有一个prototype属性,该属性指向其prototype对象 。   
  •   每一个对象都有一个 __protto__ 属性,该属性指向创建这个对象的构造函数的prototype对象  。
           
    •   function定义的函数对象的 proto 属性指向Function对象的prototype对象  。     
    •   非function定义的对象的 proto 属性指向创建它的构造函数的prototype对  。(就是都指向Object的prototype对象)     
    • Object的prototype对象的 proto 指向null 。   
       
  然后在看看下面几个常见的原型链的小题目,相信你对原型链会有一个新的认识了。
  第一题

  1. functionPerson(name,age){
  2. this.name = name;
  3. this.age = age;
  4. }
  5. 1
复制代码
  上面的 console.log 会打印什么?
  这个题考察的是对prototype对象的理解。
  第二题

  1. functionPerson(name,age){
  2. this.name = name;
  3. this.age = age;
  4. }
  5. 2
复制代码
猜猜上面会是什么结果?
  这个题考察的是对实例对象上属性的理解。
  第三题

  1. functionPerson(name,age){
  2. this.name = name;
  3. this.age = age;
  4. }
  5. 3
复制代码
在分析一下这个题目的输出结果?
   这个题目考察的是 __proto__ 属性的理解。
  第四题

  下面放大招了,这个题目可能不完全是原型链的问题,对JS基础知识的一个综合考察,可以试一试:
  1. functionPerson(name,age){
  2. this.name = name;
  3. this.age = age;
  4. }
  5. 4
复制代码



上一篇:已成红海的云客服市场,网易七鱼能来搅局吗?
下一篇:Why You Should Take Another Look at C#
低头路过 发表于 2016-11-30 19:15:32
Duang Duang Duang Duang Duang Duang Duang Duang
回复 支持 反对

使用道具 举报

`_怀念f 发表于 2016-11-30 19:18:19
连广告也信,读书读傻了吧
回复 支持 反对

使用道具 举报

wuli诺一21 发表于 2016-11-30 19:57:06
1v1飘过
回复 支持 反对

使用道具 举报

gqgt0rZy 发表于 2016-11-30 20:03:43
一直在看
回复 支持 反对

使用道具 举报

silen_123 发表于 2016-11-30 20:17:21
silen_123代言酷辣虫
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表