浅谈原型链

今天想来聊聊js中的原型链

在javascript中，实例对象在读取属性时，总是先检查自己有没有这个属性，如果有，则会直接返回这个属性，也叫私有属性，反之，则会检索prototype原型对象，如果找到同名属性，那么就返回prototype中的原型对象同名属性；如果prototype对象属性中没有，则会再往上一级查找，javascript会根据引用关系，直到找到最高一级object，若一直没有，那么就会返回undefined，说明没有此属性。

下面来看一个案例：

 function a (x) {  //构造函数a
       this.x = x;
   }
   a.prototype.x = 0;  //原型属性x的值为0
   function b (x) {  //构造函数b
       this.x = x;
   }
   b.prototype = new a (1);  //原型对象为构造函数a的实例
   function c (x) {  //构造函数c
       this.x = x;
   }
   c.prototype = new b (2);  //原型对象为构造函数b的实例
   var d = new c (3);  //实例化构造函数c
   console.log(d.x); 

此时打印出的结果时 3

 
 function a (x) {  //构造函数a
       this.x = x;
   }
   a.prototype.x = 0;  //原型属性x的值为0
   function b (x) {  //构造函数b
      this.x = x;
   }
   b.prototype = new a (1);  //原型对象为构造函数a的实例
   function c (x) {  //构造函数c
       //this.x = x; //若注释掉构造函数c的私有属性
   }
   c.prototype = new b (2);  //原型对象为构造函数b的实例
   var d = new c (3);  //实例化构造函数c
   console.log(d.x); 

此时打印结果则为 2

 function a (x) {  //构造函数a
       this.x = x;
   }
   a.prototype.x = 0;  //原型属性x的值为0
   function b (x) {  //构造函数b
      // this.x = x; //若注释掉构造函数b的私有属性
   }
   b.prototype = new a (1);  //原型对象为构造函数a的实例
   function c (x) {  //构造函数c
       //this.x = x;  //同时再注释掉构造函数c的私有属性
   }
   c.prototype = new b (2);  //原型对象为构造函数b的实例
   var d = new c (3);  //实例化构造函数c
   console.log(d.x); 

此时打印结果则为 1

 function a (x) {  //构造函数a
      // this.x = x; 
   }
   a.prototype.x = 0;  //原型属性x的值为0
   function b (x) {  //构造函数b
      // this.x = x;
   }
   b.prototype = new a (1);  //原型对象为构造函数a的实例
   function c (x) {  //构造函数c
       //this.x = x; 
   }
   c.prototype = new b (2);  //原型对象为构造函数b的实例
   var d = new c (3);  //实例化构造函数c
   console.log(d.x);  
//以上构造函数 a，b，c 的私有属性都注释掉

此时的结果就为 0

这就是大致最简单的原型链的关系，原型链能够帮助用户更清楚的认识 JavaScript 面向对象的继承关系。

当然JavaScript 能够根据原型链来查找对象之间的这种继承关系。

以上图片时转自http://c.biancheng.net/view/5805.html