JS中繼承方式總結(jié)

rottengeek 發(fā)布于2019-08-26 13:27 / 3279人閱讀

摘要：三組合繼承結(jié)合原型鏈方式和借用構(gòu)造函數(shù)方式的有點(diǎn)，進(jìn)行改進(jìn)的一種繼承方式。四寄生組合式繼承為了解決組合繼承中子構(gòu)造函數(shù)的原型鏈出現(xiàn)冗余的屬性和方法，引入的一種繼承方式。

說在前面：
為了使代碼更為簡(jiǎn)潔方便理解，本文中的代碼均將“非核心實(shí)現(xiàn)”部分的代碼移出。

一、原型鏈方式
關(guān)于原型鏈，可點(diǎn)擊《深入淺出，JS原型鏈的工作原理》，本文不再重復(fù)敘述。

思路：讓子構(gòu)造函數(shù)的原型等于父構(gòu)造函數(shù)的實(shí)例

function A() {
}
A.prototype.fn = function (){
    console.log("in A");
}

function B() {
}
B.prototype = new A();  // 讓子構(gòu)造函數(shù)的原型等于父構(gòu)造函數(shù)的實(shí)例

var b = new B();
b.fn(); // in A
console.log(b instanceof B); // true
console.log(b instanceof A); // true
console.log(b instanceof Object); // true

缺陷：如果父構(gòu)造函數(shù)中的屬性為引用類型，則子構(gòu)造函數(shù)的實(shí)例會(huì)出現(xiàn)相互影響的情況；

function A() {
    this.prop = ["1","2"];
}
A.prototype.fn = function (){
    console.log(this.prop);
}

function B() {
}
B.prototype = new A(); 

var b1 = new B();
var b2 = new B();
b1.fn(); // ?["1", "2"]
b2.fn(); // ?["1", "2"]

b1.prop.push("3"); // 子構(gòu)造函數(shù)實(shí)例b1修改繼承過來的屬性
b2.prop.push("4"); // 子構(gòu)造函數(shù)實(shí)例b2修改繼承過來的屬性

b1.fn(); // ["1", "2", "3", "4"] // b2上的修改影響了b1
b2.fn(); // ["1", "2", "3", "4"] // b1上的修改影響了b2

*導(dǎo)致缺陷原因：引用類型，屬性變量保存的是地址指針而非實(shí)際的值，這個(gè)指針指向了一塊用來保存實(shí)際內(nèi)容的地址。實(shí)例化后，所有實(shí)例中變量保存了同一個(gè)指針，均指向同一個(gè)地址，當(dāng)任何一個(gè)實(shí)例通過指針修改地址的內(nèi)容(并非重新賦予新的指針地址或者修改指針指向)時(shí)，其他實(shí)例的也會(huì)受到影響。

二、借用構(gòu)造函數(shù)方式
為了解決“原型鏈方式”繼承的缺陷，引入的一種“繼承”方案。

思路：通過call/apply，在子構(gòu)造函數(shù)中調(diào)用父類的構(gòu)造函數(shù)

function A() {
    this.prop = ["1","2"];

    this.fn2 = function () {
        console.log(this.prop);
    }
}
A.prototype.fn = function (){
    console.log(this.prop);
}

function B() {
    A.call(this); // 通過call/apply，在子構(gòu)造函數(shù)中調(diào)用父類的構(gòu)造函數(shù)
}

var b1 = new B();
var b2 = new B();
b1.fn2(); //?["1", "2"]
b2.fn2(); // ["1", "2"]

b1.prop.push("3");
b2.prop.push("4");

b1.fn2(); //?["1", "2", "3"]
b2.fn2(); // ["1", "2", "4"]

b1.fn(); // 提示異常：b1.fn is not a function
console.log(b1 instanceof B); // true
console.log(b1 instanceof A); // false
console.log(b1 instanceof Object); // true

缺陷：由于“繼承”過程中，A僅充當(dāng)普通函數(shù)被調(diào)用，使得父構(gòu)造函數(shù)A原型無法與形成子構(gòu)造函數(shù)B構(gòu)成原形鏈關(guān)系。因此無法形成繼承關(guān)系："b1 instanceof A"結(jié)果為false，B的實(shí)例b1亦無法調(diào)用A原型中的方法。實(shí)際意義上，這種不屬于繼承。

三、組合繼承
結(jié)合“原型鏈方式”和“借用構(gòu)造函數(shù)方式”的有點(diǎn)，進(jìn)行改進(jìn)的一種繼承方式。

思路：原型上的屬性和方法通過“原型鏈方式”繼承；父構(gòu)造函數(shù)內(nèi)的屬性和方法通過“借用構(gòu)造函數(shù)方式”繼承

function A() {
    this.prop = ["1","2"];
}
A.prototype.fn = function (){
    console.log(this.prop);
}

function B() {
    A.call(this); // 借用構(gòu)造函數(shù)方式
}
B.prototype = new A(); // 原型鏈方式

var b1 = new B();
var b2 = new B();
b1.fn(); //?["1", "2"]
b2.fn(); // ["1", "2"]

b1.prop.push("3");
b2.prop.push("4");

b1.fn(); //?["1", "2", "3"]
b2.fn(); // ["1", "2", "4"]
console.log(b1 instanceof B); // true
console.log(b1 instanceof A); // true
console.log(b1 instanceof Object); // true

缺陷：子構(gòu)造函數(shù)的原型出現(xiàn)一套冗余“父構(gòu)造函數(shù)非原型上的屬性和方法”。上述代碼在執(zhí)行“A.call(this);”時(shí)候，會(huì)給this(即將從B返回給b1賦值的對(duì)象)添加一個(gè)“prop”屬性；在執(zhí)行“B.prototype = new A();”時(shí)，又會(huì)通過實(shí)例化的形式給B的原型賦值一次“prop”屬性。顯然，由于實(shí)例屬性方法的優(yōu)先級(jí)高于原型上的屬性方法，絕大多數(shù)情況下，原型上的“prop”是不會(huì)被訪問到的。

四、寄生組合式繼承
為了解決“組合繼承”中子構(gòu)造函數(shù)的原型鏈出現(xiàn)冗余的屬性和方法，引入的一種繼承方式。

思路：在組合繼承的基礎(chǔ)上，通過Object.create的方式實(shí)現(xiàn)原型鏈方式

function A() {
    this.prop = ["1","2"];
}
A.prototype.fn = function (){
    console.log(this.prop);
}

function B() {
    A.call(this);
}
B.prototype = Object.create(A.prototype); // Object.create的方式實(shí)現(xiàn)原型鏈方式

var b1 = new B();
var b2 = new B();
b1.fn(); //?["1", "2"]
b2.fn(); // ["1", "2"]

b1.prop.push("3");
b2.prop.push("4");

b1.fn(); //?["1", "2", "3"]
b2.fn(); // ["1", "2", "4"]

console.log(b1 instanceof B); // true
console.log(b1 instanceof A); // true
console.log(b1 instanceof Object); // true

最后補(bǔ)充
1、因?yàn)樽訕?gòu)造函數(shù)的實(shí)例自身沒有constructor屬性，當(dāng)我們?cè)L問實(shí)例的constructor屬性時(shí)，實(shí)際是訪問原型的constructor屬性，該屬性應(yīng)該指向(子)構(gòu)造函數(shù)。但是上述例子中，代碼均會(huì)指向父構(gòu)造函數(shù)。為了與ECMAScript規(guī)范保持一致，在所有的“原型鏈繼承”后，應(yīng)當(dāng)將原型的constructor屬性指向子構(gòu)造函數(shù)本身：

    B.prototype = ....
--> B.prototype.constructor = B; <--
    ...

2、Object.create是ECMAScript 5中加入的一個(gè)函數(shù)，這個(gè)函數(shù)的功能是：將入?yún)?需為一個(gè)對(duì)象)作為原型，創(chuàng)建并返回一個(gè)新的(只有原型的)的對(duì)象。此功能等價(jià)于：

function object(o){ 
    function F(){}
    F. prototype = o; 
    return new F(); 
} // 來源于《JavaScript高級(jí)程序設(shè)計(jì)(第3版)》

云服務(wù)器 GPU云服務(wù)器 python中繼承類 java中繼承手機(jī) java中繼承小題目 js總結(jié)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/108850.html

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

登陸后可評(píng)論

0條評(píng)論

rottengeek

男|高級(jí)講師

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

TA的文章

tensorflow1

閱讀 2101·2023-04-25 17:23
如何讓selenium不彈出黑框

閱讀 2919·2021-11-17 09:33
krypt機(jī)房VPS品牌ion cloud：圣何塞數(shù)據(jù)中心cn2 gia vps簡(jiǎn)單測(cè)評(píng)

閱讀 2513·2021-08-21 14:09
前端—初級(jí)階段3(9-12)

閱讀 3579·2019-08-30 15:56
前端每日實(shí)戰(zhàn)：137# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)抽象的水波蕩漾的動(dòng)畫

閱讀 2605·2019-08-30 15:54
清除浮動(dòng)的方法

閱讀 1623·2019-08-30 15:53
react-template-easily(簡(jiǎn)單易用的react前端工程化模板)

閱讀 2126·2019-08-29 13:53
jQuery數(shù)十行代碼實(shí)現(xiàn)Material Design的漣漪效果

閱讀 1141·2019-08-29 12:31

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

JS中繼承方式總結(jié)

相關(guān)文章

JavaScript 中繼承實(shí)現(xiàn)方式歸納

Python中繼承的優(yōu)缺點(diǎn)

原生JS大揭秘—看清JS繼承本質(zhì)

Maven 模塊化項(xiàng)目管理

深入理解JavaScript原型和閉包

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

0條評(píng)論

rottengeek

男|高級(jí)講師

TA的文章

tensorflow1

如何讓selenium不彈出黑框

krypt機(jī)房VPS品牌ion cloud：圣何塞數(shù)據(jù)中心cn2 gia vps簡(jiǎn)單測(cè)評(píng)

前端—初級(jí)階段3(9-12)

前端每日實(shí)戰(zhàn)：137# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)抽象的水波蕩漾的動(dòng)畫

清除浮動(dòng)的方法

react-template-easily(簡(jiǎn)單易用的react前端工程化模板)

jQuery數(shù)十行代碼實(shí)現(xiàn)Material Design的漣漪效果

最新活動(dòng)