JS繼承的實(shí)現(xiàn)(ES6)

1. 原型鏈繼承

原型鏈繼承是我們用的最多的一種繼承方式,就是讓一個子類的原型指向父類的實(shí)例即可。

function Parent() {
    this.name = 'mike';
}
function Child() {
    this.age = 12;
}
Child.prototype = new Parent();
function Brother() { 
    this.weight = 60;
}
Brother.prototype = new Child();

有人不禁要問為什么不指向父類的原型,而是父類的一個實(shí)例?

function Parent() {
    this.name = 'mike';
}
function Child() {
    this.age = 12;
}
Child.prototype = Parent.prototype;

如果子類的原型直接指向父類的原型,那么子類就無法獲取父類構(gòu)造函數(shù)定義的屬性和函數(shù),同時修改子類的原型也會影響到父類的原型,這是違背繼承的原則的。

2. 類式繼承(借用構(gòu)造函數(shù))

利用call和apply在子類的構(gòu)造函數(shù)中調(diào)用父類的構(gòu)造函數(shù)。

function Parent(age) {
    this.name = ['mike', 'jack', 'smith'];
    this.age = age;
}
function Child(age) {
    //Parent.call(this, age);
    Parent.apply(this, [age]);
}

這樣子類就可以使用父類的屬性了。

3. Class繼承(ES6)

ES6實(shí)現(xiàn)了Class繼承,底層還是通過原型鏈繼承實(shí)現(xiàn)的,只是一種新的寫法。

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {}
}
class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x, y);
        this.color = color;
    }
    toString() {}
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • class的基本用法 概述 JavaScript語言的傳統(tǒng)方法是通過構(gòu)造函數(shù),定義并生成新對象。下面是一個例子: ...
    呼呼哥閱讀 4,210評論 3 11
  • 在ES5繼承的實(shí)現(xiàn)非常有趣的,由于沒有傳統(tǒng)面向?qū)ο箢惖母拍?,Javascript利用原型鏈的特性來實(shí)現(xiàn)繼承,這其中...
    Daguo閱讀 26,175評論 10 44
  • 本文先對es6發(fā)布之前javascript各種繼承實(shí)現(xiàn)方式進(jìn)行深入的分析比較,然后再介紹es6中對類繼承的支持以及...
    lazydu閱讀 16,834評論 7 44
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持,譯者再次奉上一點(diǎn)點(diǎn)福利:阿里云產(chǎn)品券,享受所有官網(wǎng)優(yōu)惠,并抽取幸運(yùn)大...
    HetfieldJoe閱讀 3,726評論 2 27
  • 面向?qū)ο蟮恼Z言都有一個類的概念,通過類可以創(chuàng)建多個具有相同方法和屬性的對象,ES6之前并沒有類的概念,在ES6中引...
    Erric_Zhang閱讀 1,217評論 1 4

友情鏈接更多精彩內(nèi)容