快捷導(dǎo)航

JavaScript中常見的繼承方式總結(jié)

更新時間：2022年11月15日 11:56:45 作者：beckyyyy

這篇文章主要和大家詳細介紹了JavaScript中常見的幾種繼承方式，文中的示例代碼講解詳細，對我們學(xué)習(xí)JavaScript有一定幫助，需要的小伙伴可以參考下面文章詳細內(nèi)容

JS和Java中雖然都有對象的概念，但這兩種對象卻大有不同。Java的對象是基于類創(chuàng)建的，JS的對象卻是基于一個特殊的對象——原型對象——創(chuàng)建的，之前看到一個蓋房子的比喻，在Java中蓋房子是先畫好圖紙再蓋房子，JS中蓋房子卻是先蓋一個樣板房再蓋其他房子，覺得也挺貼切。

所以JS中的繼承和Java中的繼承就大有不同了，是基于原型對象的，如果兩個對象形成繼承關(guān)系，那必然是其中一個對象的原型鏈上存在一個指針指向另一個對象。即使JS中的兩個類聲明了繼承關(guān)系，也是表現(xiàn)在原型對象上。比如：

class A {
    say() {
        console.log('say: hello!');
    }
}

class B extends A {
    constructor() {
        super();
    }
}

console.log(A.prototype); // {constructor: ?, say: ?}
console.log(B.__proto__); // class A {}
console.log(B.prototype); // A?{constructor: ?}

首先，類是JS中函數(shù)的語法糖，并且在JS中函數(shù)本身也是對象，也就是說A和B是兩個對象，所以extends操作使得B自身的原型屬性__proto__指向了A，相當于const B = Object.create(A);。

其次，類的繼承關(guān)系也影響其生成的實例，眾所周知，函數(shù)本身存在一個特殊的對象屬性：prototype，函數(shù)經(jīng)過構(gòu)造調(diào)用產(chǎn)生的實例的原型屬性__proto__是指向這個對象的，而extends操作修改了B的prototype對象，所以B實例上的原型屬性__proto__也就被修改了，通過B實例的原型屬性__proto__能找到A的prototype，即在B實例的原型鏈上能找到A的prototype。

const b = new B();
console.log(b.__proto__); // A?{constructor: ?} 即B.prototype
console.log(b.__proto__.__proto__); // {constructor: ?, say: ?} 即A.prototype

在JS中使用字面量定義的對象時，其默認的原型屬性__proto__指向Object的prototype對象，相當于默認繼承自O(shè)bject，所以字面量對象可以調(diào)用Object的實例方法。

可以使用isPrototypeOf來判斷一個對象是否在另一個對象的原型鏈上。

由上述可知，JS中的繼承關(guān)系與原型對象密切相關(guān)，為了達到繼承的關(guān)聯(lián)關(guān)系（共享某些屬性和方法），就要從原型對象著手：

1.使用Object.create的方式創(chuàng)建對象，使兩個對象直接產(chǎn)生繼承關(guān)系

const o1 = {
    name: 'o1',
    age: 18,
    walk() {
        console.log('walking...')
    }
};
const o2 = Object.create(o1);
console.log(o2.__proto__); // {name: 'o1', age: 18}
console.log(o2.walk()); // walking...
console.log(o1.isPrototypeOf(o2)); // true

2.使用new操作創(chuàng)建對象，使產(chǎn)生的實例和類（或函數(shù)）的原型對象產(chǎn)生繼承關(guān)系

const b = new B();
console.log(B.prototype); // A?{constructor: ?}
console.log(b.__proto__); // A?{constructor: ?} 即B.prototype
console.log(B.prototype.isPrototypeOf(b)); // true

3.使用extends關(guān)鍵字使類形成繼承關(guān)系，擴展類實例的原型鏈

class A {
    say() {
        console.log('say: hello!');
    }
}

class B extends A {
    constructor() {
        super();
    }
}

console.log(A.prototype); // {constructor: ?, say: ?}
const b = new B();
console.log(b.__proto__.__proto__); // {constructor: ?, say: ?} 即A.prototype
console.log(A.isPrototypeOf(B)); // true
console.log(A.isPrototypeOf(b)); // false
console.log(A.prototype.isPrototypeOf(b)); // true

4.修改函數(shù)的prototype屬性使函數(shù)形成繼承關(guān)系，擴展函數(shù)實例的原型鏈

function C() {
    this.name = 'c';
    this.operation = function() { return 'printing...'};
}
function D() {}
D.prototype = new C();
const d = new D();
console.log(d.__proto__.__proto__ === C.prototype); // true
console.log(C.prototype.isPrototypeOf(d)); // true
console.log(D.prototype.isPrototypeOf(d)); // true

這里存在一個問題，就是子類實例化時無法向父類的構(gòu)造函數(shù)傳參

5.盜用父類構(gòu)造函數(shù)

在函數(shù)內(nèi)部通過call或apply調(diào)用父類函數(shù)（非構(gòu)造調(diào)用），可繼承父類實例自身（非原型對象）的屬性和方法（相當于把子類實例（即this）傳遞進父類函數(shù)，對這個this做了一遍操作），雖然可在初始化時傳遞參數(shù)給父類，但無法形成原型鏈

function E() {
    C.call(this);
    this.do = function () { return 'do homework'; }
}
const e = new E();
console.log(E.prototype.isPrototypeOf(e)); // true
console.log(C.prototype.isPrototypeOf(e)); // false
console.log(e); // E?{name: 'c', operation: ?, do: ?}
console.log(e.do()); // do homework

子類產(chǎn)生的實例無法對父類及其原型對象應(yīng)用instanceof和isPrototypeOf方法。

此時如果父類想共享方法給子類，必須把方法直接在定義在函數(shù)內(nèi)部，綁定到實例上，而無法通過父類的prototype對象共享。

6.結(jié)合4和5，使得子類實例可繼承父類原型對象的屬性和方法，且能形成原型鏈

function E() {
    C.call(this);
    this.do = function () { return 'do homework'; }
}
E.prototype = new C();
const e = new E();
console.log(E.prototype.isPrototypeOf(e)); // true
console.log(C.prototype.isPrototypeOf(e)); // true
console.log(e); // E?{name: 'c', operation: ?, do: ?}
console.log(e.do()); // do homework

7.用Object.create()替換new父類實例來重寫子類的原型對象

function inheritatePrototype(subT, superT) {
  let proto = Object.create(superT.prototype);
  proto.constructor = subT;
  subT.prototype = proto;
}

inheritatePrototype(E, C);

可以舍去new中不需要的操作

8.通過工廠方式共享屬性和方式

類似工廠函數(shù)，但不是用裸的Object，以某種方式取得對象（如new等返回新對象的函數(shù)），對此對象加屬性或方法以增強功能，并返回對象。

function createAnother(original) {
  let clone = Object.create(original);
  clone.xx = xxx;
  return clone;
}

適合主要關(guān)注對象，而不在乎類型和構(gòu)造函數(shù)的場景

存在的問題： 必須在構(gòu)造函數(shù)中定義方法（屬于實例非原型對象的方法），函數(shù)不能重用

到此這篇關(guān)于JavaScript中常見的繼承方式總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript繼承方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中常見的繼承方式總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具