工具/材料

javascript

操作方法

• 01

  學習原型鏈之前我們先認識一下構造函數，代碼如下：
  
  function S() {
  this.name = 'xxx';
  this.say = function() { console.log(this.name) }
  }
  var s1 = new S();
  
  其中，s1是S的實例，s1的__proto__（大家先不用管__proto__屬性，后續會講到）中有一個constructor（構造函數）屬性，該屬性指向S。
  在這里，大家可以記住兩點：
  1.s1是構造函數S的實例；
  2.s1.__proto__.constructor===S 也可以寫成 s1.constructor===S;

  
• 02

  接下來我們來看下一段代碼：
  
  function S2() {}
  S2.prototype.name = 'XXX';
  S2.prototype.say = function() {
  console.log(this.name);
  }
  
  var s2 = new S2();
  var s3 = new S2();
  console.log(s2.sayName === s3.sayName);//true
  console.log(s2.__proto__===S2.prototype);//true
  
  這一段代碼中我們可以看到一個新屬性——prototype，這是什么呢，其實這就是構造函數S2的原型對象，每個對象都有__proto__屬性，但是只有函數對象才有prototype屬性。而s2是構造函數S2的實例，而s2.__proto__指向的就是S2的原型對象，即s2.__proto__===S2.prototype。得到一個結論，實例的__proto__屬性指向的就是其構造函數的原型對象。

  
• 03

  繼續上一步的代碼，我們添加代碼繼續調試：
  
  console.log(s2.__proto__);//返回S2的原型對象
  console.log(S2.prototype);//返回S2的原型對象
  
  console.log(s2.__proto__.__proto__);//返回Object對象
  console.log(S2.prototype.__proto__);//返回Object對象
  
  console.log(s2.__proto__.__proto__.__proto__);//返回null
  console.log(S2.prototype.__proto__.__proto__);//返回null
  
  其實，S2的原型對象上還有原型對象，因為S2的原型對象也相當于只是Object對象的一個實例。

  
• 04

  在這里我給大家畫了一張圖，便于大家理解原型鏈。

  

特別提示

碼子不易，小編如有說得不對的地方，望大家指點包含，謝謝