前端面試題10----原型、原型鏈

10.原型、原型鏈

一、prototype
在JavaScript中，每個函式都有一個prototype屬性，這個屬性指向函式的原型物件。
例如：

function Person(age) {
    this.age = age       
}
Person.prototype.name = 'kavin';
var person1 = new Person()
var person2 = new Person()
console.log(person1.name) //kavin
console.log(person2.name)  //kavin

函式的prototype指向了一個物件，而這個物件正是呼叫建構函式時建立的例項的原型，也就是person1和person2的原型。
原型的概念：每一個javascript物件(除null外)建立的時候，就會與之關聯另一個物件，這個物件就是我們所說的原型，每一個物件都會從原型中“繼承”屬性。
建構函式和例項原型之間的關係：

二、__proto__
這是每個物件(除null外)都會有的屬性，叫做__proto__，這個屬性會指向該物件的原型。

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

建構函式、例項原型、__proto__之間的關係

三、constructor
每個原型都有一個constructor屬性，指向該關聯的建構函式。

function Person() {

}
console.log(Person===Person.prototype.constructor)  //true

關係圖:

function Person() {

}

var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true

當獲取 person.constructor 時，其實 person 中並沒有 constructor 屬性,當不能讀取到constructor 屬性時，會從 person 的原型也就是 Person.prototype 中讀取，正好原型中有該屬性，所以：

person.constructor === Person.prototype.constructor

四、例項與原型
當讀取例項的屬性時，如果找不到，就會查詢與物件關聯的原型中的屬性，如果還查不到，就去找原型的原型，一直找到最頂層為止

function Person() {

}

Person.prototype.name = 'Kevin';
var person = new Person();
person.name = 'Daisy';

console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin

刪除了 person 的 name 屬性時，讀取 person.name，從 person 物件中找不到 name 屬性就會從 person 的原型也就是 person.proto ，也就是 Person.prototype中查詢，結果為 Kevin。

五、原型的原型
原型也是一個物件，既然是物件,可以用最原始的方式建立它

var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin

其實原型物件就是通過 Object 建構函式生成的,例項的 proto 指向建構函式的 prototype
關係圖：

六、原型鏈

建構函式、原型和例項的關係：每個建構函式都有一個原型物件，原型物件都包含一個指向建構函式的指標，而例項都包含一個指向原型物件的內部指標。
假如讓原型物件等於另一個型別的例項，此時的原型物件將包含一個指向另一個原型的指標，相應地，另一個原型中也包含著一個指向另一個建構函式的指標。假如另一個原型又是另一個型別的例項，那麼上述關係依然成立。如此層層遞進，就構成了例項與原型的鏈條。

最頂層Object.prototype 的原型

console.log(Object.prototype.__proto__ === null) // true

Object.prototype.proto 的值為 null 跟 Object.prototype 沒有原型，其實表達了一個意思。
所以查詢屬性的時候查到 Object.prototype 就可以停止查詢了。

關係圖：

圖中由相互關聯的原型組成的鏈狀結構就是原型鏈，也就是藍色的這條線。

原型和原型鏈參考自:參考