JavaScript 系列之原型（二）

這是我參與8月更文挑戰的第4天，活動詳情查看：8月更文挑戰

2、原型鏈

當試圖獲得一個對象的某個屬性時，若是這個對象自己沒有這個屬性，那麼沿着它的 __proto__（即它的構造函數的原型）中尋找,就是鏈式結構稱爲原型鏈。

那麼如何判斷這個屬性是否是對象自己的屬性呢？使用 hasOwnProperty，經常使用的地方是遍歷一個對象的時候。

var item;
for (item in f) {
  // 高級瀏覽器已經在 for in 中屏蔽了來自原型的屬性，可是這裏建議你們仍是加上這個判斷，保證程序的健壯性
  if (f.hasOwnProperty(item)) {
    console.log(item);
  }
}
複製代碼

3、原型和原型鏈應用

爲何須要原型及原型鏈？

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.eat = function() {
    console.log(age + "歲的" + name + "在吃飯。");
  }
}

let p1 = new Person("jsliang", 24);
let p2 = new Person("jsliang", 24);

console.log(p1.eat === p2.eat); // false
複製代碼

能夠看到，對於同一個函數，咱們經過 new 生成出來的實例，都會開出新的一塊堆區，因此上面代碼中 person1 和 person2 的吃飯是不一樣的（返回 false）。

擁有屬於本身的私有屬性和方法，有時候也須要公有屬性和方法，那麼如何建設共享庫呢？—— prototype

function Person(name) {
  this.name = name;
}

// Person 在它的原型上定義了一塊空間 eat，全部的人均可以共享它
Person.prototype.eat = function() {
  console.log("吃飯");
}

let p1 = new Person("jsliang", 24);
let p2 = new Person("梁峻榮", 24);

console.log(p1.eat === p2.eat); // true
複製代碼

4、總結

1. Object.prototype 是全部對象的爸爸，全部對象均可以經過 __proto__ 找到它
2. Function.prototype 是全部函數的爸爸，全部函數均可以經過 __proto__ 找到它
3. Function.prototype 和 Object.prototype 是兩個特殊的對象，他們由引擎來建立
4. 除了以上兩個特殊對象，其餘對象都是經過構造器 new 出來的
5. 每一個函數（好比構造函數）都有 prototype 屬性（除了 Function.prototype.bind()），該屬性指向原型
6. 每一個對象都有 __proto__ 屬性，指向了建立該對象的構造函數的原型
7. 原型對象的 constructor 指回構造函數
8. 實例的 __proto__ 指向該對象的構造函數的原型對象，該對象的構造函數的原型對象中定義了共享的屬性和方法，對象能夠經過 __proto__ 來尋找不屬於該對象的屬性，__proto__ 將對象鏈接起來組成了原型鏈。

相關文章

• JavaScript深刻之從原型到原型鏈
• 深度解析原型中的各個難點
• 【何不三連】比繼承家業還要簡單的JS繼承題-封裝篇(牛刀小試)