資訊專欄INFORMATION COLUMN
摘要：特點(diǎn)跟借用構(gòu)造函數(shù)模式一樣，每次創(chuàng)建對(duì)象都會(huì)創(chuàng)建一遍方法。缺點(diǎn)寄生組合式繼承使用時(shí)說(shuō)明解決了組合繼承存在的問(wèn)題特點(diǎn)只調(diào)用了一次構(gòu)造函數(shù)，并且因此避免了在上面創(chuàng)建不必要的多余的屬性原型鏈還能保持不變還能夠正常使用和缺點(diǎn)參考資料
原型鏈繼承
//父類(lèi)
function Person(name, age) {
this.name = name;
this.age = age;
this.play = [1, 2, 3];
this.setName = function () { }
}
Person.prototype.setAge = function () { }
//子類(lèi)
function Student(price) {
this.price = price;
this.setScore = function () { }
}
Student.prototype = new Person() // 核心，子類(lèi)型的原型為父類(lèi)型的一個(gè)實(shí)例對(duì)象
var s1 = new Student(15000)
var s2 = new Student(14000)
console.log(s1,s2)
說(shuō)明：
實(shí)現(xiàn)的本質(zhì)是通過(guò)將子類(lèi)的原型指向了父類(lèi)的實(shí)例。所以子類(lèi)的實(shí)例就可以通過(guò)__proto__訪問(wèn)到 Student.prototype 也就是Person的實(shí)例，
這樣就可以訪問(wèn)到父類(lèi)的私有方法，然后再通過(guò)__proto__指向父類(lèi)的prototype就可以獲得到父類(lèi)原型上的方法。
子類(lèi)繼承父類(lèi)的屬性和方法是將父類(lèi)的私有屬性和公有方法都作為自己的公有屬性和方法。
特點(diǎn)：
父類(lèi)新增原型方法/原型屬性，子類(lèi)都能訪問(wèn)到
簡(jiǎn)單，易于實(shí)現(xiàn)
缺點(diǎn)：
無(wú)法實(shí)現(xiàn)多繼承
來(lái)自原型對(duì)象的所有屬性被所有實(shí)例共享
創(chuàng)建子類(lèi)實(shí)例時(shí)，無(wú)法向父類(lèi)構(gòu)造函數(shù)傳參
要想為子類(lèi)新增屬性和方法，必須要在Student.prototype = new Person() 之后執(zhí)行，不能放到構(gòu)造器中
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)
說(shuō)明：
就是將子類(lèi)中德變量在父類(lèi)中執(zhí)行一遍。只能繼承父類(lèi)的屬性和方法，如果父類(lèi)的原型還有方法和屬性，子類(lèi)是拿不到的。
特點(diǎn)：
解決了原型鏈繼承中子類(lèi)實(shí)例共享父類(lèi)引用屬性的問(wèn)題
創(chuàng)建子類(lèi)實(shí)例時(shí)，可以向父類(lèi)傳遞參數(shù)
可以實(shí)現(xiàn)多繼承(call多個(gè)父類(lèi)對(duì)象)
缺點(diǎn)：
實(shí)例并不是父類(lèi)的實(shí)例，只是子類(lèi)的實(shí)例
只能繼承父類(lèi)的實(shí)例屬性和方法，不能繼承原型屬性和方法
無(wú)法實(shí)現(xiàn)函數(shù)復(fù)用，每個(gè)子類(lèi)都有父類(lèi)實(shí)例函數(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
說(shuō)明：
融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn)，并過(guò)濾掉其缺點(diǎn)，是 JavaScript 中最常用的繼承模式。
先在使用構(gòu)造函數(shù)繼承時(shí)執(zhí)行一遍父類(lèi)的構(gòu)造函數(shù)，又在實(shí)現(xiàn)子類(lèi)原型的原型鏈繼承時(shí)又調(diào)用一遍父類(lèi)構(gòu)造函數(shù)。
優(yōu)點(diǎn)：
可以繼承實(shí)例屬性/方法，也可以繼承原型屬性/方法
不存在引用屬性共享問(wèn)題
可傳參
函數(shù)可復(fù)用
缺點(diǎn)：
調(diào)用了兩次父類(lèi)構(gòu)造函數(shù)，生成了兩份實(shí)例
function createObj(o) {
function F(){}
F.prototype = o;
return new F();
}
說(shuō)明：
實(shí)際上是對(duì)原型鏈繼承的一個(gè)封裝，也是ES5 Object.create 的模擬實(shí)現(xiàn)，將傳入的對(duì)象作為創(chuàng)建的對(duì)象的原型。
特點(diǎn)：
父類(lèi)新增原型方法/原型屬性，子類(lèi)都能訪問(wèn)到
簡(jiǎn)單，易于實(shí)現(xiàn)
缺點(diǎn)：
包含引用類(lèi)型的屬性值始終都會(huì)共享相應(yīng)的值，這點(diǎn)跟原型鏈繼承一樣。
function createObj (o) {
var clone = Object.create(o);
clone.sayName = function () {
console.log("hi");
}
return clone;
}
說(shuō)明：
其實(shí)是對(duì)原型式繼承的第二次封裝，過(guò)程中對(duì)繼承的對(duì)象進(jìn)行了拓展。
特點(diǎn)：
跟借用構(gòu)造函數(shù)模式一樣，每次創(chuàng)建對(duì)象都會(huì)創(chuàng)建一遍方法。
缺點(diǎn)：
寄生組合式繼承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;
}
// 使用時(shí)
prototype(Child, Parent);
說(shuō)明：
解決了組合繼承存在的問(wèn)題
特點(diǎn)：
只調(diào)用了一次 Parent 構(gòu)造函數(shù)，并且因此避免了在 Parent.prototype 上面創(chuàng)建不必要的、多余的屬性
原型鏈還能保持不變
還能夠正常使用 instanceof 和 isPrototypeOf
缺點(diǎn)：
參考資料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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/104769.html
摘要：在他的重學(xué)前端課程中提到到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。大部分前端工程師的知識(shí)，其實(shí)都是來(lái)自于實(shí)踐和工作中零散的學(xué)習(xí)。一基礎(chǔ)前端工程師吃飯的家伙，深度廣度一樣都不能差。 開(kāi)篇 前端開(kāi)發(fā)是一個(gè)非常特殊的行業(yè)，它的歷史實(shí)際上不是很長(zhǎng)，但是知識(shí)之繁雜，技術(shù)迭代速度之快是其他技術(shù)所不能比擬的。 winter在他的《重學(xué)前端》課程中提到： 到現(xiàn)在為止，前端工程師已經(jīng)成為研...
摘要：在他的重學(xué)前端課程中提到到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。大部分前端工程師的知識(shí)，其實(shí)都是來(lái)自于實(shí)踐和工作中零散的學(xué)習(xí)。一基礎(chǔ)前端工程師吃飯的家伙，深度廣度一樣都不能差。開(kāi)篇 前端開(kāi)發(fā)是一個(gè)非常特殊的行業(yè)，它的歷史實(shí)際上不是很長(zhǎng)，但是知識(shí)之繁雜，技術(shù)迭代速度之快是其他技術(shù)所不能比擬的。 winter在他的《重學(xué)前端》課程中提到： 到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系...
摘要：面試闖關(guān)在面試過(guò)程中，總會(huì)被問(wèn)到一些你用到過(guò)但是記不清一些零碎的知識(shí)，現(xiàn)在做一下總結(jié)。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。作為對(duì)象原型鏈的終點(diǎn)。格式采用鍵值對(duì)，例如參考面試總結(jié) 面試闖關(guān)1 在面試過(guò)程中，總會(huì)被問(wèn)到一些你用到過(guò)、但是記不清一些零碎的知識(shí)，現(xiàn)在做一下總結(jié)。 第一部分：HTML+CSS 1.常用那幾種瀏覽器測(cè)試？有哪些內(nèi)核(L...
摘要：面試闖關(guān)在面試過(guò)程中，總會(huì)被問(wèn)到一些你用到過(guò)但是記不清一些零碎的知識(shí)，現(xiàn)在做一下總結(jié)。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。作為對(duì)象原型鏈的終點(diǎn)。格式采用鍵值對(duì)，例如參考面試總結(jié) 面試闖關(guān)1 在面試過(guò)程中，總會(huì)被問(wèn)到一些你用到過(guò)、但是記不清一些零碎的知識(shí)，現(xiàn)在做一下總結(jié)。 第一部分：HTML+CSS 1.常用那幾種瀏覽器測(cè)試？有哪些內(nèi)核(L...
摘要：面試闖關(guān)在面試過(guò)程中，總會(huì)被問(wèn)到一些你用到過(guò)但是記不清一些零碎的知識(shí)，現(xiàn)在做一下總結(jié)。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。作為對(duì)象原型鏈的終點(diǎn)。格式采用鍵值對(duì)，例如參考面試總結(jié) 面試闖關(guān)1 在面試過(guò)程中，總會(huì)被問(wèn)到一些你用到過(guò)、但是記不清一些零碎的知識(shí)，現(xiàn)在做一下總結(jié)。 第一部分：HTML+CSS 1.常用那幾種瀏覽器測(cè)試？有哪些內(nèi)核(L...
閱讀 2244·2023-04-26 00:23
閱讀 921·2021-09-08 09:45
閱讀 2509·2019-08-28 18:20
閱讀 2644·2019-08-26 13:51
閱讀 1673·2019-08-26 10:32
閱讀 1462·2019-08-26 10:24
閱讀 2097·2019-08-26 10:23
閱讀 2267·2019-08-23 18:10
