理解JavaScript原型鏈

更新時間：2016年10月25日 15:54:53 作者：雨簾輕掛

簡單說一說對JavaScript原型鏈的理解,希望對大家學(xué)習(xí)JavaScript原型鏈有所幫助，具體內(nèi)容如下

每一個JavaScript對象都和另一個對象相關(guān)聯(lián)，相關(guān)聯(lián)的這個對象就是我們所說的“原型”。每一個對象都會從原型繼承屬性和方法。有一個特殊的對象沒有原型，就是Object。在之后的圖示中會進(jìn)行說明。

舉個栗子，我們首先聲明一個函數(shù)Student()：

function Student(name){
  this.name = name;
 this.hello = function(){
   alert(`Hello,${this.name}`);
 }
 }

這個函數(shù)包含一個屬性name和一個方法hello。
在JavaScript中，可以通過new關(guān)鍵字來調(diào)用Student函數(shù)（不寫new就是一個普通函數(shù)，寫new就是一個構(gòu)造函數(shù)），并且返回一個原型指向Student.prototype的對象，如下所示：

 var xiaoming = new Student("xiaoming");
 alert(xiaoming.name); // xiaoming
 xiaoming.hello(); // Hello,xiaoming

如果我們想確認(rèn)一下我們的設(shè)想對不對，就會希望去比較一下xiaoming.prototype和Student.prototype是否相等。
但是xiaoming沒有prototype屬性，不過可以用__proto__來查看。接下來我們就用這些屬性來查看xiaoming，Student，Object之間的原型鏈：

document.onreadystatechange = function(){
 // interactive表示文檔已被解析，但瀏覽器還在加載其中鏈接的資源
 if(document.readyState === "interactive"){
  var xiaoming = new Student("xiaoming");
  alert(xiaoming.name);
  xiaoming.hello();
  console.log("xiaoming.__proto__：");
  console.log(xiaoming.__proto__);
  console.log("Student.prototype：");
  console.log(Student.prototype);
  console.log("xiaoming.__proto__ === Student.prototype：" + xiaoming.__proto__ === Student.prototype);
  console.log("Student.prototype.constructor：" + Student.prototype.constructor);
  console.log("Student.prototype.prototype：" + Student.prototype.prototype);
  console.log("Student.prototype.__proto__：");
  console.log(Student.prototype.__proto__);
  console.log(Object.prototype);
  console.log("Student.prototype.__proto__ === Object.prototype：" + Student.prototype.__proto__ === Object.prototype);
 }
}