原型鏈知識(shí)記錄

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

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

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

在引入es6的extends之前，函數(shù)的繼承就是通過(guò)原型來(lái)實(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í)是有問(wèn)題的，需要在B.prototype = new A("");后面加上：

B.prototype.constructor = B;

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

缺點(diǎn)：
1.要給B的prototype新增方法必須要在 new A("");之后
2.無(wú)法實(shí)現(xiàn)多繼承
3.沒(méi)法向父類(lèi)的構(gòu)造函數(shù)傳遞參數(shù)
4.實(shí)例是當(dāng)前類(lèi)的實(shí)例，也是父類(lèi)的實(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.可以使用父類(lèi)的屬性和方法
2.可以實(shí)現(xiàn)多重繼承，即可以call多個(gè)函數(shù)
3.實(shí)例對(duì)象是當(dāng)前類(lèi)的實(shí)例，不是父類(lèi)的實(shí)例
缺點(diǎn)：
1.無(wú)法獲取A的prototype的屬性和方法
2.只是子類(lèi)的實(shí)例，不是父類(lèi)的實(shí)例
3.無(wú)法實(shí)現(xiàn)函數(shù)復(fù)用，每個(gè)子類(lèi)都有父類(lèi)實(shí)例函數(shù)的副本，影響性能（此處應(yīng)該是調(diào)用call的時(shí)候會(huì)生成父類(lèi)的實(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.解決了原型鏈繼承的無(wú)法實(shí)現(xiàn)多繼承和沒(méi)法向父類(lèi)的構(gòu)造函數(shù)傳遞參數(shù)的缺點(diǎn)
3.解決了構(gòu)造繼承無(wú)法獲取A的prototype的屬性和方法還有只是子類(lèi)的實(shí)例，不是父類(lèi)的實(shí)例的問(wèn)題
缺點(diǎn)：
1.調(diào)用了兩次父類(lèi)構(gòu)造函數(shù)，生成了兩份實(shí)例（子類(lèi)實(shí)例將子類(lèi)原型上的那份屏蔽了）

四.寄生組合繼承

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è)沒(méi)有實(shí)例方法的類(lèi)
  var Super = function(){};
  Super.prototype = A.prototype;
  //將實(shí)例作為子類(lèi)的原型，這樣就可以只獲取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ǔ)上，只生成了一份父類(lèi)的實(shí)例，prototype也只繼承了父類(lèi)的prototype，沒(méi)有繼承私有的屬性
缺點(diǎn)：
1.實(shí)現(xiàn)復(fù)雜

順便加一個(gè)知識(shí)點(diǎn)，當(dāng)使用new關(guān)鍵字來(lái)創(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

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

GPU云服務(wù)器云服務(wù)器原型原型鏈原型鏈原型鏈繼承原型鏈圖

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101767.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Noodles

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

SSL證書(shū)是什么？SSL證書(shū)一般要多少錢(qián)？

閱讀 1127·2021-11-22 15:35
Arasaka：圣何塞高防VPS月付100元起,AS9929線路

閱讀 1759·2021-10-26 09:49
強(qiáng)強(qiáng)聯(lián)手：Pyston團(tuán)隊(duì)宣布加入Anaconda！

閱讀 3303·2021-09-02 15:11
2018面試題總結(jié)（一）

閱讀 2142·2019-08-30 15:53
成長(zhǎng)小筆記

閱讀 2698·2019-08-30 15:53
（實(shí)戰(zhàn)）多邊形，梯形盒陰影css實(shí)現(xiàn)技巧

閱讀 2991·2019-08-30 14:11
關(guān)于浮動(dòng)float

閱讀 3584·2019-08-30 12:59
深入學(xué)習(xí)CSS布局系列（一）布局常用屬性

閱讀 3303·2019-08-30 12:53

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

原型鏈知識(shí)記錄

相關(guān)文章

**「JS篇」你不知道的 JS 知識(shí)點(diǎn)總結(jié)（一）**

記錄一次杭州順網(wǎng)科技的面試過(guò)程

記錄一次杭州順網(wǎng)科技的面試過(guò)程

JS筆記

**JS基礎(chǔ)之常用小技巧和知識(shí)總結(jié)(二)**

發(fā)表評(píng)論

0條評(píng)論

Noodles

男|高級(jí)講師

TA的文章

SSL證書(shū)是什么？SSL證書(shū)一般要多少錢(qián)？

Arasaka：圣何塞高防VPS月付100元起,AS9929線路

強(qiáng)強(qiáng)聯(lián)手：Pyston團(tuán)隊(duì)宣布加入Anaconda！

2018面試題總結(jié)（一）

成長(zhǎng)小筆記

（實(shí)戰(zhàn)）多邊形，梯形盒陰影css實(shí)現(xiàn)技巧

關(guān)于浮動(dòng)float

深入學(xué)習(xí)CSS布局系列（一）布局常用屬性

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

原型鏈知識(shí)記錄

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！