原型鏈的概念

由于在JS世界中遵堵，函數(shù)其實(shí)也是個(gè)對象啄寡，所以函數(shù)可以擁有屬性讯檐，JS規(guī)定了所有的函數(shù)都默認(rèn)擁有一個(gè)叫做prototype的屬性，這個(gè)屬性指向了另一個(gè)對象摆霉。比如我們聲明一個(gè)function：

function Person() {}
console.log(Person.prototype);

打印出來的結(jié)果為：

image.png

可以看到豪椿，函數(shù)的prototype默認(rèn)擁有兩個(gè)屬性：constructor和__proto__；我們可以給函數(shù)的prototype對象添加更多的自定義屬性携栋，比如搭盾，我想給Person函數(shù)添加一個(gè)getName方法，可以這么做：

function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  return this.name;
}
console.log(Person.prototype);

現(xiàn)在prototype里面已經(jīng)有個(gè)自定義的方法了：

image.png

可以通過instanceof判斷一個(gè)對象是否是某個(gè)構(gòu)造函數(shù)的實(shí)例：

p instanceof Person; // true

注意，構(gòu)造函數(shù)首字母需要大寫溶推，所以截圖中的構(gòu)造函數(shù)聲明是不規(guī)范的徊件。

令人困惑的是奸攻，我們可以通過這個(gè)實(shí)例對象去調(diào)用綁定在Person.prototype上的方法，比如上述例子中通過p.getName()也可以拿到結(jié)果“張三”虱痕，看起來似乎是創(chuàng)建p的時(shí)候會(huì)把Person.prototype對象復(fù)制到這個(gè)實(shí)例對象中舞箍。然而事實(shí)并不是這樣。

我們可以console.log(p)查看下p中的內(nèi)容皆疹，得到結(jié)果：

image.png

可以看到：p實(shí)例對象中有一個(gè)默認(rèn)的__proto__對象疏橄，而getName方法就在__proto__對象中。在JavaScript中略就，每個(gè)實(shí)例對象都有一個(gè)私有屬性__proto__捎迫，指向它的構(gòu)造函數(shù)的原型對象prototype。

p.__proto__ === Person.prototype; // true

事實(shí)上表牢，所有的對象都具有__proto__屬性窄绒，因?yàn)樗械膶ο蠖际?code>Object的實(shí)例對象：

var o = {};
o instanceof Object; // true
o.__proto__ === Object.prototype; // true

重點(diǎn): 當(dāng)試圖訪問一個(gè)對象的屬性時(shí)，它會(huì)先在該對象本身內(nèi)查找崔兴，如果沒有查到彰导，則會(huì)在該對象的原型上查找，如果還沒找到敲茄，則繼續(xù)在該對象的原型的原型上查找位谋，層層向上直到一個(gè)原型對象為null。這條“鏈”我們稱之為原型鏈堰燎。

好了掏父，根據(jù)上面的描述，我們來看下這段代碼的原型查找是怎么樣的：

function Person(name) {
    this.name = name;
}
Person.prototype.getName = function() {
    return this.name;
}
const p = new Person('張三');
p.toString(); // [object Object]

1. p查找本身有沒有toString方法
2. p本身沒有該方法秆剪，則查找其構(gòu)造函數(shù)原型上有無此方法
3. p.__proto__上也沒有赊淑，則繼續(xù)查找p.__proto__.__proto__對象上有無此方法，找到并調(diào)用：
   
   image.png

由上所知仅讽，下面這個(gè)等式也是成立的：

Person.prototype.__proto__ === Object.prototype;  // true

ok陶缺，還有個(gè)問題，Person也是個(gè)對象洁灵，那Person.__proto__指向的是誰呢饱岸？答案是Function.prototype，所有的函數(shù)都是Function的實(shí)例处渣，而Function.__proto__指向Function.prototype：

Person instanceof Function; // true
Person.__proto__ === Function.prototype; // true
Function.__proto__ === Function.prototype; // true

上述便是一個(gè)構(gòu)造函數(shù)的整個(gè)原型鏈的結(jié)構(gòu)伶贰，簡單總結(jié)一下：

• 所有的JS對象都存在__proto__屬性，只有函數(shù)對象才有prototype屬性罐栈，所以函數(shù)對象既有__proto__也有prototype
• 構(gòu)造函數(shù)的實(shí)例對象的__proto__指向構(gòu)造函數(shù)的prototype黍衙，普通對象都是Object的實(shí)例，在沒有特別處理的情況下荠诬，普通對象的__proto__指向Object.prototype

繼承

這里我們只討論基于prototype的繼承琅翻，假設(shè)我們有兩個(gè)構(gòu)造函數(shù)：

// 定義一個(gè)父類
function Parent() {}
Parent.prototype.getName = function() {
  return 'parent\'s name';
}
// 定義一個(gè)子類
function Child() {}

我們可以直接通過prototype賦值的寫法進(jìn)行繼承：

Child.prototype = Parent.prototype;

這樣位仁，所有掛載在Parent.prototype上的方法和屬性都能被繼承下來了:

const child = new Child();
console.log(child.getName()); // parent's name

但這種做法有兩個(gè)缺點(diǎn)，明顯的是方椎，直接用prototype賦值之后聂抢，Child.prototype和Parent.prototype現(xiàn)在指向了同一個(gè)對象，任何對Child.prototype的更改都會(huì)直接影響Parent.prototype棠众；還有個(gè)不明顯的缺點(diǎn)琳疏，上文中說到，函數(shù)的prototype有個(gè)默認(rèn)的屬性叫做constructor闸拿，指向的是構(gòu)造器本身：

Child.prototype.constructor === Child; // true
Parent.prototype.constructor === Parent; // true

賦值之后空盼，Child.prototype.constructor的指向變成了Parent！一般的做法是手動(dòng)將指向改回來：

Child.prototype.constructor = Child; 

但我們并沒有解決兩個(gè)prototype綁定在了一起的問題新荤。我們可以用另一種基于prototype的方法實(shí)現(xiàn)繼承揽趾，即使用Object.create()方法：

Child.prototype = Object.create(Parent.prototype, {
    constructor: {
      value: Child,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });

關(guān)于Object.create()的詳細(xì)解釋，請看MDN苛骨。上述的意思大致是創(chuàng)造一個(gè)基于Parent.prototype的對象并賦值給Child.prototype篱瞎，其中第二個(gè)參數(shù)的意思是設(shè)置這個(gè)新創(chuàng)造對象的constructor屬性，里面的設(shè)置內(nèi)容對應(yīng)Object.defineProperty的第三個(gè)參數(shù)（即屬性描述符）痒芝，可以看到這里設(shè)置了constructor屬性的value為Child俐筋，即將Child.prototype.constructor指向Child；
上述代碼還需要完善下吼野，因?yàn)槲覀冸m然實(shí)現(xiàn)了Child繼承了Parent校哎，且解決了prototype的指向問題两波，但是Child.__proto__現(xiàn)在仍然指向的是Function.prototype瞳步，為了繼承的完整性，我們需要將Child.__proto__指向Parent：

Object.setPrototypeOf
  ? Object.setPrototypeOf(Child, Parent)
  : Child.__proto__ = Parent;

這個(gè)基于Object.create()的繼承方式腰奋，就是ES6的class中extends的實(shí)現(xiàn)原理单起。

在普通對象中使用Object.create()，比如：

const origin = {
  name: 'origin'
};
const o = Object.create(origin);

此時(shí)o.__proto__指向的不再是Object.prototype了劣坊，而是origin嘀倒，并且o已經(jīng)繼承了origin對象的所有屬性（無論是否可枚舉）：

o.__proto__ === origin; // true
console.log(o.name); // 'origin'

我們可以使用Object.getPrototypeOf()獲取當(dāng)前對象的原型：

console.log(Object.getPrototypeOf(o)); // {name: "origin'}

可以使用Object.getOwnPropertyNames()獲取一個(gè)對象的自身屬性（即不是繼承下來的屬性），返回的是自身所有屬性（無論是否可枚舉）的數(shù)組：

console.log(Object.getOwnPropertyNames(o)); // []
console.log(Object.getOwnPropertyNames(origin)); // ["name"]

可以看到局冰， Object.getOwnPropertyNames()與Object.keys()相比测蘑，后者僅返回自身的可枚舉屬性，而不可枚舉不會(huì)被返回康二。

到這里碳胳，差不多已經(jīng)把JS中原型的概念都介紹了，看完這篇文章并且能真的理解的話沫勿，JS原型的知識(shí)肯定不成問題了挨约。