javascript之原型链详解

对象着手

在谈原型链以前，先了解对象，万物皆对象。

• 全部引用类型（函数，数组，对象）都拥有__proto__属性（隐式原型）

• 全部函数拥有prototype属性（显式原型）（仅限函数）

• 原型对象：拥有prototype属性的对象，在定义函数时就被建立

prototype与__proto__两个概念

• prototype：此属性只有构造函数才有，它指向的是当前构造函数的原型对象。
• proto：此属性是任何对象在建立时都会有的一个属性，它指向了产生当前对象的构造函数的原型对象，因为并不是标准规定属性，不要随便去更改这个属性的值，以避免破坏原型链，可是能够借助这个属性来学习，所谓的原型链就是由__proto__链接而成的链。

原型链详解

在js代码中 经过对象建立(下面一段简单的代码)详细分析原型链 一段简单代码:

function foo(){}
foo.prototype.z=3;
var obj=new foo(); obj.y=2; obj.x=1;
//调用 obj.x;//1 obj.y;//2
obj.z;//3
typeof obj.toString;//'function' 'z' in obj;//true obj.hasOwnProperty('z');//false
复制代码obj.z=5; obj.z;//5 'z' in obj;//true obj.hasOwnProperty('z');//true foo.prototype.z;//3 复制代码

• 代码简单分析

  上面一段代码，声明第一个函数foo的时候，它就会带一个foo.prototype的属性，这个属性是一个对象属性，用new foo();构造器的方式构造一个新的对象obj。这时候这个obj的原型会指向foo的prototype属性。 对于这个foo函数的原型也会指向Object.prototype,这个Object.prototype也是有原型的，它的原型指向null。

• 代码对象原型链图:

原型链分析图

• 对象访问属性顺序

  对象访问属性的顺序，是采用向上查找，若是当前对象没有，它会一直向上原型链中查找，一直找到null，若是尚未会返回undefind。

• 对象中值修改说明

  代码中修改obj.z的值后，再次输出obj.z的时候是5,foo.prototype.z是3，说明咱们在修改或添加对象的属性的时候，只是修改了对象自己obj.prototype.z中的值，而原型链中foo.prototype.z的值并不会修改。

• in，hasOwnProperty等方法的出现

  首先查看整个原型链，会想这两个方法是怎么来的，在foo的的proto指向上一级Object.prototype的时候，就能够访问Object中的一些函数和属性了，其中就包括这两个方法。

  第一次调用

  'z' in obj;//true 
  obj.hasOwnProperty('z');//false
  复制代码

  表示的是z并非obj这个对象上的，而是对象的原型链上的。

  'z' in obj;//true
    obj.hasOwnProperty('z');//true
    foo.prototype.z;//3
  复制代码

  第二次修改了obj.z的值，z就是obj这个对象上的了，可是也并无修改原型链中的z的值。

特殊说明

_proto_是每个对象都有的属性，它的指向会有一个特殊说明，大多数状况下 _proto_指向了产生当前对象的构造函数的原型对象，也就是那个 prototype。可是会有特殊的状况

• 特殊状况

var a={};
 var b=Object.create(a);
复制代码

object.create是建立了一个空对象，空对象的原型指向a，a也是空对象，这其中不存在prototype;Object.create在继承中也常被使用，建立一个空对象指向()内的对象，这这样实现了b继承a，也不会篡改a中的内容，在这里就不具体说明了。

原理图分析

原理图分析

总结

• 到底什么是原型链?

  proto是任何对象都有的属性，在js中万物皆对象，因此会造成一条proto连起来的链条，递归访问proto必须最终到头，而且值是null。

以为本文对你有帮助？请分享给更多人

欢迎你们关注个人公众号——程序员成长指北。请自行微信搜索——“程序员成长指北”