JavaScript系列 - 深刻之從原型到原型鏈

本文詳情：https://github.com/mqyqingfen...

構造函數建立對象
先使用構造函數建立一個對象

function Person(){

}
var person = new Person();
person.name = "Mit";
console.log(person.name)

在這個例子中，Person 就是一個構造函數，咱們使用 new 建立了一個實例對象 person。

prototype
每一個函數都有一個prototype對象

function Person() {

}
// 雖然寫在註釋裏，可是你要注意：
// prototype是函數纔會有的屬性
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

函數的prototype對象指向該構造函數建立實例的原型

(__proto__)
每一個js對象都具備一個屬性，叫__proto__，這個屬性指向該對象的原型

function Person() {

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

更新以下

constructor
每一個原型都有一個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

原型的原型
在前面，咱們已經講了原型也是一個對象，既然是對象，咱們就能夠用最原始的方式建立它，那就是：

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

其實原型對象就是經過 Object 構造函數生成的，結合以前所講，實例的 proto 指向構造函數的 prototype ，因此咱們再更新下關係圖：

原型鏈

那 Object.prototype 的原型呢？

null，咱們能夠打印：

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

然而 null 究竟表明了什麼呢？

引用阮一峯老師的 《undefined與null的區別》 就是：

null 表示「沒有對象」，即該處不該該有值。
因此 Object.prototype.__proto__ 的值爲 null 跟 Object.prototype 沒有原型，其實表達了一個意思。

因此查找屬性的時候查到 Object.prototype 就能夠中止查找了。

最後一張關係圖也能夠更新爲：