原型鏈知識(shí)記錄

Noodles 發(fā)布于2019-08-23 15:16 / 1172人閱讀

摘要：此貼用于記錄原型鏈相關(guān)的一些東西。在里，函數(shù)都有，對(duì)象都有，一個(gè)函數(shù)的和一個(gè)對(duì)象的就是原型，原型其實(shí)也是一個(gè)對(duì)象。如果原型鏈很長，當(dāng)訪問某個(gè)屬性的時(shí)候，會(huì)話更多的時(shí)間，需要注意原型鏈不要太長。在引入的之前，函數(shù)的繼承就是通過原型來實(shí)現(xiàn)的。

此貼用于記錄原型鏈相關(guān)的一些東西。
在JavaScript里，函數(shù)都有prototype，對(duì)象都有__proto__，一個(gè)函數(shù)的prototype和一個(gè)對(duì)象的__proto__就是原型，原型其實(shí)也是一個(gè)對(duì)象。
一個(gè)函數(shù)的prototype和這個(gè)函數(shù)的示例對(duì)象的__proto__是同一個(gè)引用，即：

function A(){
}

let a = new A();
console.log(a.__proto__ === A.prototype); //返回的是true

當(dāng)調(diào)用某一個(gè)對(duì)象的方法的時(shí)候，如果找不到這個(gè)對(duì)象的方法，則會(huì)去找這個(gè)對(duì)象的原型里的方法，如果再找不到，則繼續(xù)找原型的原型的方法，一直往上找，這個(gè)就是原型鏈，如果都找不到，則會(huì)報(bào)錯(cuò)。

如果原型鏈很長，當(dāng)訪問某個(gè)屬性的時(shí)候，會(huì)話更多的時(shí)間，需要注意原型鏈不要太長。

在引入es6的extends之前，函數(shù)的繼承就是通過原型來實(shí)現(xiàn)的。下面記錄一下我理解的繼承，下面的繼承參考的是[JS繼承的實(shí)現(xiàn)方式
][1]，他那里有完整的繼承方法。

一. 原型鏈繼承

function A(name) {
  this.name = name;
  this.f1 = function () {
    console.log(this.name + "正在做f1");
  }
}
A.prototype.f2 = function () {
  console.log(this.name + "正在做f2");
}

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

B.prototype = new A("");

let b = new B("test");
b.f1();
b.f2();
console.log(b.__proto__ === B.prototype); //true

console.log(b instanceof A);//true
console.log(b instanceof B);//true

上述例子中，b居然是A的實(shí)例對(duì)象，也是B的實(shí)例對(duì)象，這樣其實(shí)是有問題的，需要在B.prototype = new A("");后面加上：

B.prototype.constructor = B;

優(yōu)點(diǎn)：
1.簡單，實(shí)現(xiàn)容易
2.能訪問父類所有的方法和屬性

缺點(diǎn)：
1.要給B的prototype新增方法必須要在 new A("");之后
2.無法實(shí)現(xiàn)多繼承
3.沒法向父類的構(gòu)造函數(shù)傳遞參數(shù)
4.實(shí)例是當(dāng)前類的實(shí)例，也是父類的實(shí)例

二. 構(gòu)造繼承

function A(name){
  this.name = name;
  this.f1 = function(){
    console.log(this.name + "正在做f1");
  }
}
A.prototype.f2 = function(){
  console.log(this.name + "正在做f2");
}

function B(name) {
  A.call(this, name);
}

let b = new B("test");
b.f1();
// b.f2();// 會(huì)報(bào)錯(cuò)

console.log(b instanceof A);//false
console.log(b instanceof B);//true

優(yōu)點(diǎn)：
1.可以使用父類的屬性和方法
2.可以實(shí)現(xiàn)多重繼承，即可以call多個(gè)函數(shù)
3.實(shí)例對(duì)象是當(dāng)前類的實(shí)例，不是父類的實(shí)例
缺點(diǎn)：
1.無法獲取A的prototype的屬性和方法
2.只是子類的實(shí)例，不是父類的實(shí)例
3.無法實(shí)現(xiàn)函數(shù)復(fù)用，每個(gè)子類都有父類實(shí)例函數(shù)的副本，影響性能（此處應(yīng)該是調(diào)用call的時(shí)候會(huì)生成父類的實(shí)例副本，具體的還得再研究研究）

三. 組合繼承

function A(name){
  this.name = name;
  this.f1 = function(){
    console.log(this.name + "正在做f1");
  }
}
A.prototype.f2 = function(){
  console.log(this.name + "正在做f2");
}

function B(name) {
  A.call(this, name);
}
B.prototype = new A("");
//要修正prototype的constructor，為什么要修正還有待研究
B.prototype.constructor = B;

let b = new B("test");
b.f1();
b.f2();

console.log(b instanceof A);//true
console.log(b instanceof B);//true

優(yōu)點(diǎn)：
1.包含了原型鏈繼承和構(gòu)造繼承的優(yōu)點(diǎn)
2.解決了原型鏈繼承的無法實(shí)現(xiàn)多繼承和沒法向父類的構(gòu)造函數(shù)傳遞參數(shù)的缺點(diǎn)
3.解決了構(gòu)造繼承無法獲取A的prototype的屬性和方法還有只是子類的實(shí)例，不是父類的實(shí)例的問題
缺點(diǎn)：
1.調(diào)用了兩次父類構(gòu)造函數(shù)，生成了兩份實(shí)例（子類實(shí)例將子類原型上的那份屏蔽了）

四.寄生組合繼承

function A(name){
  this.name = name;
  this.f1 = function(){
    console.log(this.name + "正在做f1");
  }
}
A.prototype.f2 = function(){
  console.log(this.name + "正在做f2");
}

function B(name) {
  A.call(this, name);
}

(function(){
  // 創(chuàng)建一個(gè)沒有實(shí)例方法的類
  var Super = function(){};
  Super.prototype = A.prototype;
  //將實(shí)例作為子類的原型，這樣就可以只獲取A的prototype的屬性了
  B.prototype = new Super();
  //
  B.prototype.constructor = B;
})();

let b = new B("test");
b.f1();
b.f2();

console.log(b instanceof A);//true
console.log(b instanceof B);//true

優(yōu)點(diǎn)：
1.在組合繼承的基礎(chǔ)上，只生成了一份父類的實(shí)例，prototype也只繼承了父類的prototype，沒有繼承私有的屬性
缺點(diǎn)：
1.實(shí)現(xiàn)復(fù)雜

順便加一個(gè)知識(shí)點(diǎn)，當(dāng)使用new關(guān)鍵字來創(chuàng)建對(duì)象的時(shí)候，也用到了原型相關(guān)的知識(shí)，所以也記在了這里；
假設(shè)有一個(gè)function A(name){ this.name = name; }；使用new關(guān)鍵字創(chuàng)建一個(gè)A的實(shí)例對(duì)象let a = new A();
new關(guān)鍵字主要做了以下幾個(gè)步驟：
（1）創(chuàng)建一個(gè)空的對(duì)象
var obj = {};
（2）將這個(gè)對(duì)象的原型__proto__指向A的prototype
obj.__proto__ = A.prototype
（3）函數(shù)A的this指向obj；接著執(zhí)行A函數(shù)
（4）將obj返回，變量a指向obj

本文主要是參考了別人的文章，寫一些自己的理解，如果有什么寫錯(cuò)的地方歡迎大神來指正一下