資訊專欄INFORMATION COLUMN
摘要：繼承前言作為一門輕量級的腳本語言在和的橫空出世之后將其推向的新的高度雖然中出現(xiàn)的新的生成對象的類語法格式但依然為的語法糖而我們依然有必要從的原生實現(xiàn)入手來了解它的繼承實現(xiàn)方式給出了更加簡潔的固定的類聲明方式有興趣的可以查看阮一峰的入門下面給
javascript繼承 前言
javascript作為一門輕量級的腳本語言在ES6和node.js的橫空出世之后將其推向的新的高度,雖然 ES6 中出現(xiàn)的新的生成對象的類語法格式,但依然為ES5的語法糖,而我們依然有必要從javascript的原生實現(xiàn)入手來了解它的繼承實現(xiàn)方式,ES6給出了更加簡潔的固定的類聲明方式,有興趣的可以查看阮一峰的ES6入門,下面給出原文鏈接es6 阮一峰http://es6.ruanyifeng.com
javascript的繼承不同的開發(fā)者有不同的理解方式,筆者認(rèn)為主要分為四種
- 原型鏈繼承 - 對象冒充繼承(構(gòu)造函數(shù)繼承 不過我不喜歡這個名字) - 組合繼承 - 寄生組合繼承
對于繼承,可以預(yù)先聲明一個Animal, 進(jìn)而討論不同的繼承方式.
let Animal = (function () {
function Animal (name) {
this.name = name || "Animal";
this.sleep = function(){
console.log(this.name + "正在睡覺！");
}
}
Animal.prototype.eat = function(food) {
console.log(this.name + "正在吃：" + food);
}
return Animal;
})()
原型鏈繼承
let Cat = (function () {
function Cat(){
}
Cat.prototype = new Animal();
Cat.prototype.name = "cat";
return Cat;
})()
原型鏈?zhǔn)?javascript 的典型繼承方式, 這種繼承方式的最大特點就是共享,所有事例共享原型對象中的所有屬性和方法, 共享是它的最大優(yōu)點 也是它的最大缺點, 正對我們的不同需求, 比如大多數(shù)情況下我們常常需要某些屬性是子類特有的 而一些讀取屬性方法需要共享,--另外此種繼承無法向父類傳參,無法實現(xiàn)多繼承
對象冒充繼承
let Cat = (function () {
function Cat(name){
Animal.call(this,name);
}
return Cat;
})()
對象冒充繼承就是簡單的利用call或者apply方法實現(xiàn)繼承,這種繼承最大的特點正好與原型鏈繼承相反不能繼承原型屬性/方法--非共享(子類自有一份), 同樣這是它的優(yōu)點也是它的缺點, 另外它解決了原型鏈繼承中無法向父類傳參的缺點, 并且可以實現(xiàn)某種意義上的多繼承--(注意這種多繼承是打引號的)
組合繼承
let Cat = (function () {
function Cat(name){
Animal.call(this, name);
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
return Cat;
})()
組合繼承是比較好的繼承, 他是原型鏈繼承和對象冒充繼承的合體, 合理的利用了這兩種組合的特點(是特點不是優(yōu)點^_^),既是子類的實例，也是父類的實例, 但有一個缺點就是調(diào)用了兩次父類構(gòu)造函數(shù)，生成了兩份實例（子類實例將子類原型上的那份屏蔽了）造成內(nèi)存浪費. 這也是用的最多的一種
寄生組合繼承
let Cat = (function () {
function Cat(name){
Animal.call(this, name);
}
(function(sub, sup){
var Super = function(){};
Super.prototype = sup.prototype;
sub.prototype = new Super();
sub.prototype.constructor = sub
})(Cat, Animal)
return Cat;
})()
寄生組合繼承是對組合繼承的基礎(chǔ)上的升華, 個人認(rèn)為是堪稱完美的繼承方式,改進(jìn)的組合繼承內(nèi)存浪費的問題^_^
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107172.html
摘要：繼承的繼承可以簡單的認(rèn)為就是上篇文章中的寄生組合繼承模型幾乎一模一樣，只是在語法結(jié)構(gòu)上多了和關(guān)鍵字，另外一個區(qū)別就是父類和子類通過連接。 ES5繼承 VS ES6繼承 前言 ES6 已經(jīng)發(fā)展了很長時間里 javascript相對于其他例如java等是一門比較怪異的語言, 由于其歷史原因其繼承機(jī)制和對象生成方式被人詬病. ES6 的出現(xiàn)將徹底改變這一現(xiàn)狀, ES6 引入了新的生成對象(類...
摘要：組合繼承實現(xiàn)了屬性分離，方法共享下的完美繼承方案繼承我們的主角，，就是對組合繼承的改進(jìn)。這也是為什么在子類構(gòu)造函數(shù)中一定要顯示調(diào)用的原因。 談到繼承，或者更廣義上的：一個對象可以使用另外一個對象的屬性或方法。實現(xiàn)起來無外乎有兩種方式：apply or call 改變this的作用域原型繼承 改變__proto__指向，添加作用域鏈 而JavaScript所有的繼承實現(xiàn)，都是圍繞以上兩點...
摘要：寄生組合式繼承的繼承方式有多種主要有原型鏈繼承借用構(gòu)造函數(shù)組合式繼承寄生式繼承和寄生組合式繼承。中利用定義類，實現(xiàn)類的繼承子類里調(diào)用父類構(gòu)造函數(shù)實現(xiàn)實例屬性和方法的繼承子類原型繼承父類原型，實現(xiàn)原型對象上方法的繼承。 JavaScript中實現(xiàn)繼承 ??在JavaScript中實現(xiàn)繼承主要實現(xiàn)以下兩方面的屬性和方法的繼承，這兩方面相互互補，既有共享的屬性和方法，又有特有的屬性和方法。 ...
摘要：深入系列第十五篇，講解各種繼承方式和優(yōu)缺點。優(yōu)點融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點，是中最常用的繼承模式。寄生組合式繼承為了方便大家閱讀，在這里重復(fù)一下組合繼承的代碼組合繼承最大的缺點是會調(diào)用兩次父構(gòu)造函數(shù)。 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優(yōu)缺點。 寫在前面 本文講解JavaScript各種繼承方式和優(yōu)缺點。 但是注意： 這篇文章更像是筆記，哎...
摘要：以上的代碼對應(yīng)到就是調(diào)用父類的值得注意的是關(guān)鍵字表示父類的構(gòu)造函數(shù)，相當(dāng)于的。舉個例子這是因為作為構(gòu)造函數(shù)的語法糖，同時有屬性和屬性，因此同時存在兩條繼承鏈。子類的屬性，表示構(gòu)造函數(shù)的繼承，總是指向父類。 前言 在上一篇 《 ES6 系列 Babel 是如何編譯 Class 的(上)》，我們知道了 Babel 是如何編譯 Class 的，這篇我們學(xué)習(xí) Babel 是如何用 ES5 實現(xiàn)...
閱讀 2780·2021-09-23 11:44
閱讀 1671·2021-09-13 10:24
閱讀 2619·2021-09-08 09:36
閱讀 1231·2019-08-30 15:54
閱讀 2248·2019-08-30 13:54
閱讀 3308·2019-08-30 10:57
閱讀 1844·2019-08-29 18:43
閱讀 3609·2019-08-29 15:10
