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

資訊專欄INFORMATION COLUMN

JavaScript常用6大繼承方式解析

yearsj / 2195人閱讀

摘要：特點跟借用構(gòu)造函數(shù)模式一樣，每次創(chuàng)建對象都會創(chuàng)建一遍方法。缺點寄生組合式繼承使用時說明解決了組合繼承存在的問題特點只調(diào)用了一次構(gòu)造函數(shù)，并且因此避免了在上面創(chuàng)建不必要的多余的屬性原型鏈還能保持不變還能夠正常使用和缺點參考資料

原型鏈繼承 
//父類
function Person(name, age) {
   this.name = name;
   this.age = age;
   this.play = [1, 2, 3];
   this.setName = function () { }
}
Person.prototype.setAge = function () { }
//子類
function Student(price) {
   this.price = price;
   this.setScore = function () { }
}
Student.prototype = new Person() // 核心，子類型的原型為父類型的一個實例對象
var s1 = new Student(15000)
var s2 = new Student(14000)
console.log(s1,s2)

說明：
實現(xiàn)的本質(zhì)是通過將子類的原型指向了父類的實例。所以子類的實例就可以通過__proto__訪問到 Student.prototype 也就是Person的實例，
這樣就可以訪問到父類的私有方法，然后再通過__proto__指向父類的prototype就可以獲得到父類原型上的方法。
子類繼承父類的屬性和方法是將父類的私有屬性和公有方法都作為自己的公有屬性和方法。

特點：
父類新增原型方法/原型屬性，子類都能訪問到
簡單，易于實現(xiàn)

缺點：
無法實現(xiàn)多繼承
來自原型對象的所有屬性被所有實例共享
創(chuàng)建子類實例時，無法向父類構(gòu)造函數(shù)傳參
要想為子類新增屬性和方法，必須要在Student.prototype = new Person() 之后執(zhí)行，不能放到構(gòu)造器中

構(gòu)造函數(shù)繼承 
function Person(name, age) {
    this.name = name,
    this.age = age,
    this.setName = function () {}
}
Person.prototype.setAge = function () {}
function Student(name, age, price) {
    Person.call(this, name, age)  // 核心，相當(dāng)于: this.Person(name, age)
    /*this.name = name
    this.age = age*/
    this.price = price
}
var s1 = new Student("Tom", 20, 15000)

說明：
就是將子類中德變量在父類中執(zhí)行一遍。只能繼承父類的屬性和方法，如果父類的原型還有方法和屬性，子類是拿不到的。

特點：
解決了原型鏈繼承中子類實例共享父類引用屬性的問題
創(chuàng)建子類實例時，可以向父類傳遞參數(shù)
可以實現(xiàn)多繼承(call多個父類對象)

缺點：
實例并不是父類的實例，只是子類的實例
只能繼承父類的實例屬性和方法，不能繼承原型屬性和方法
無法實現(xiàn)函數(shù)復(fù)用，每個子類都有父類實例函數(shù)的副本，影響性能

組合繼承 
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.setAge = function () { }
}
Person.prototype.setAge = function () {
    console.log("111");
}
function Student(name, age, price) {
    Person.call(this,name,age);//核心
    this.price = price;
    this.setScore = function () { }
}
Student.prototype = new Person();//核心
Student.prototype.constructor = Student//核心，組合繼承是需要修復(fù)構(gòu)造函數(shù)指向的
Student.prototype.sayHello = function () { }
var s1 = new Student("Tom", 20, 15000);
var s2 = new Student("Jack", 22, 14000);
console.log(s1);
console.log(s1.constructor); //Student
console.log(s2.constructor); //Person

說明：
融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點，并過濾掉其缺點，是 JavaScript 中最常用的繼承模式。
先在使用構(gòu)造函數(shù)繼承時執(zhí)行一遍父類的構(gòu)造函數(shù)，又在實現(xiàn)子類原型的原型鏈繼承時又調(diào)用一遍父類構(gòu)造函數(shù)。

優(yōu)點：
可以繼承實例屬性/方法，也可以繼承原型屬性/方法
不存在引用屬性共享問題
可傳參
函數(shù)可復(fù)用

缺點：
調(diào)用了兩次父類構(gòu)造函數(shù)，生成了兩份實例

原型式繼承 
function createObj(o) {
    function F(){}
    F.prototype = o;
    return new F();
}

說明：
實際上是對原型鏈繼承的一個封裝，也是ES5 Object.create 的模擬實現(xiàn)，將傳入的對象作為創(chuàng)建的對象的原型。

特點：
父類新增原型方法/原型屬性，子類都能訪問到
簡單，易于實現(xiàn)

缺點：
包含引用類型的屬性值始終都會共享相應(yīng)的值，這點跟原型鏈繼承一樣。

寄生式繼承 
function createObj (o) {
    var clone = Object.create(o);
    clone.sayName = function () {
        console.log("hi");
    }
    return clone;
}

說明：
其實是對原型式繼承的第二次封裝，過程中對繼承的對象進行了拓展。

特點：
跟借用構(gòu)造函數(shù)模式一樣，每次創(chuàng)建對象都會創(chuàng)建一遍方法。

缺點：

寄生組合式繼承 
function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

function prototype(child, parent) {
    var prototype = object(parent.prototype);
    prototype.constructor = child;
    child.prototype = prototype;
}

// 使用時
prototype(Child, Parent);

說明：
解決了組合繼承存在的問題

特點：
只調(diào)用了一次 Parent 構(gòu)造函數(shù)，并且因此避免了在 Parent.prototype 上面創(chuàng)建不必要的、多余的屬性
原型鏈還能保持不變
還能夠正常使用 instanceof 和 isPrototypeOf

缺點：

參考資料

https://www.cnblogs.com/humin/p/4556820.html

https://github.com/mqyqingfeng/Blog/issues/16

https://segmentfault.com/a/1190000016708006

http://es6.ruanyifeng.com/#docs/class-extends

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

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

相關(guān)文章

  • 一名【合格】前端工程師的自檢清單

    摘要：在他的重學(xué)前端課程中提到到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學(xué)習(xí)。一基礎(chǔ)前端工程師吃飯的家伙，深度廣度一樣都不能差。 開篇 前端開發(fā)是一個非常特殊的行業(yè)，它的歷史實際上不是很長，但是知識之繁雜，技術(shù)迭代速度之快是其他技術(shù)所不能比擬的。 winter在他的《重學(xué)前端》課程中提到： 到現(xiàn)在為止，前端工程師已經(jīng)成為研...

    羅志環(huán) 評論0 收藏0

  • 一名【合格】前端工程師的自檢清單

    摘要：在他的重學(xué)前端課程中提到到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學(xué)習(xí)。一基礎(chǔ)前端工程師吃飯的家伙，深度廣度一樣都不能差。開篇 前端開發(fā)是一個非常特殊的行業(yè)，它的歷史實際上不是很長，但是知識之繁雜，技術(shù)迭代速度之快是其他技術(shù)所不能比擬的。 winter在他的《重學(xué)前端》課程中提到： 到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系...

    isaced 評論0 收藏0

  • 面試闖關(guān)1

    摘要：面試闖關(guān)在面試過程中，總會被問到一些你用到過但是記不清一些零碎的知識，現(xiàn)在做一下總結(jié)。在兼容模式中，頁面以寬松的向后兼容的方式顯示模擬老式瀏覽器的行為以防止站點無法工作。作為對象原型鏈的終點。格式采用鍵值對，例如參考面試總結(jié) 面試闖關(guān)1 在面試過程中，總會被問到一些你用到過、但是記不清一些零碎的知識，現(xiàn)在做一下總結(jié)。 第一部分：HTML+CSS 1.常用那幾種瀏覽器測試？有哪些內(nèi)核(L...

    malakashi 評論0 收藏0

  • 面試闖關(guān)1

    摘要：面試闖關(guān)在面試過程中，總會被問到一些你用到過但是記不清一些零碎的知識，現(xiàn)在做一下總結(jié)。在兼容模式中，頁面以寬松的向后兼容的方式顯示模擬老式瀏覽器的行為以防止站點無法工作。作為對象原型鏈的終點。格式采用鍵值對，例如參考面試總結(jié) 面試闖關(guān)1 在面試過程中，總會被問到一些你用到過、但是記不清一些零碎的知識，現(xiàn)在做一下總結(jié)。 第一部分：HTML+CSS 1.常用那幾種瀏覽器測試？有哪些內(nèi)核(L...

    cgspine 評論0 收藏0

  • 面試闖關(guān)1

    摘要：面試闖關(guān)在面試過程中，總會被問到一些你用到過但是記不清一些零碎的知識，現(xiàn)在做一下總結(jié)。在兼容模式中，頁面以寬松的向后兼容的方式顯示模擬老式瀏覽器的行為以防止站點無法工作。作為對象原型鏈的終點。格式采用鍵值對，例如參考面試總結(jié) 面試闖關(guān)1 在面試過程中，總會被問到一些你用到過、但是記不清一些零碎的知識，現(xiàn)在做一下總結(jié)。 第一部分：HTML+CSS 1.常用那幾種瀏覽器測試？有哪些內(nèi)核(L...

    LucasTwilight 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<