国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術(shù)文章
文章詳情頁

JavaScript對象繼承

瀏覽:3日期:2023-11-18 14:03:42

開門見山,以下根據(jù)繼承方式的不同逐一介紹:

基于原型鏈的方式

這應(yīng)該是基于js中prototype的特點(diǎn)實(shí)現(xiàn)的最簡單的繼承

var SuperType = function() { this.property= true;}SuperType.prototype.getSuperValue= function() { return this.property;} var SubType = function() { this.subproperty = false;}SubType.prototype = new SuperType(); // 繼承 SubType.prototype.getSubValue = function() { return this.subproperty;} var instance = new SubType();alert(instance.getSuperValue()); // true

此時,上面幾個對象的引用關(guān)系是這樣的:

JavaScript對象繼承JS對象繼承應(yīng)用關(guān)系(引用自JavaScript高級程序設(shè)計(jì))

那如果子類有同名屬性,super的getter會返回那個呢:

var Sub = function() { this.property = false;}Sub.prototype = new SuperType(); var instance = new Sub();alert(instance.getSuperValue()); // true,返回子類的屬性

可見JS中子類的屬性會重寫父類的,此外,方法的重寫也一樣,這是由于JS查找對象的屬性是由子對象開始遍歷,子類沒有才繼續(xù)去父對象上找。另外,JS還提供了方法來判斷繼承關(guān)系:

alert(instance instanceof SubType); // true alert(instance instanceof SuperType); // true alert(instance instanceof Object);// true alert(SubType.prototype.isPrototypeOf(instance)); //true alert(SuperType.prototype.isPrototypeOf(instance)); //true alert(Object.prototype.isPrototypeOf(instance));//true

使用原型鏈有個很明顯的問題,就是子對象都share同一個父對象的屬性,如果是引用類型,就可能對一個對象修改,卻影響了其他對象的數(shù)據(jù)。

構(gòu)造函數(shù)繼承

構(gòu)造函數(shù)的方式繼承可以解決share同一個父對象屬性的問題,并且可以引用父對象的帶參構(gòu)造函數(shù):

var SuperType = function(name) { this.name = name; this.colors = [’red’, ’yellow’];} var SubType = function(name) { SuperType.call(this, name); this.age = 18;} var subA = new SubType(’Lilei’); var subB = new SubType(’HanMeimei’);subA.colors.push(’blue’); // 修改引用屬性 alert(subA.name); // Lilei alert(subA.colors); // ’red,yellow,blue’ alert(subB.name); // HanMeimei alert(subB.colors); // ’red,yellow’

和對象創(chuàng)建的情況一樣,單純的構(gòu)造函數(shù)方式會使得每個對象都不能share父對象的函數(shù)。于是有了組合繼承的方式,各取所長。

組合繼承的方式

組合繼承是通過原型鏈來繼承對象的方法,構(gòu)造函數(shù)來繼承對象的屬性:

var SuperType = function(name) { this.name = name}SuperType.prototype.getName = function() { return this.name} var SubType = function(name) { SuperType.call(this, name);}SubType.prototype = new SuperType(); var sub = new SubType(’Lilei’);alert(sub.getName()); // Lilei

在new子對象時,會在調(diào)用構(gòu)造函數(shù)時重新定義該對象自己的屬性,從而和父對象的屬性分離。但是組合繼承要求父對象的構(gòu)造方式也是通過組合構(gòu)造的方式定義的,否則子類用組合繼承也是白搭。

通過工廠模式創(chuàng)建子對象

以下提供的繼承方式是在《JS高級程序設(shè)計(jì)》中看到的,此書把它們也作為繼承方式,但我覺得只能算是對之前繼承方式的工廠模式化罷了。

原型式繼承

給我任何一個原型,還你一個他的子對象(的工廠模式。。。)

// 就是他了function subInstance(o) { function F(){} F.prototype = o; return new F();}var superInstance = { name: ’Lilei’ }var sub = subInstance(superInstance); alert(sub.name); // Lilei

但是很顯然,子對象是share父對象的所有屬性的。用組合方式實(shí)現(xiàn)subInstance?可以試試,但是由于是工廠模式,考慮到通用性,這不是個好的選擇。

寄生式繼承

如果工廠不是那么通用,則可以在創(chuàng)建子對象是再加點(diǎn)額外的屬性:

function subInstanceWithAge(o) { function F(){} F.prototype = o; var sub = new F(); sub.age = 18; return sub; }var superInstance = { name: ’Lilei’ }var sub = subInstanceWithAge(superInstance); alert(sub.name); // Lileialert(sub.age); // 18

同樣是share父對象的屬性。

寄生組合式繼承

這種繼承方式簡直傷心病況。

function inherit(subType, superType) { function F() {} F.prototype = superType.prototype; var sub_prototype = new F(); sub_prototype.constructor = subType; subType.prototype = sub_prototype;} var SuperType = function(name) { this.name = name;}SuperType.prototype.getName = function() { return this.name;} var SubType = function(name, age) { SuperType.call(this, name); this.age = age;}inherit(SubType, SuperType);SubType.prototype.getAge = function() { return this.age;} var sub = new SubType(’Lilei’, 18);alert(sub.getName()); // Lilei alert(sub.getAge()); // 18 alert(SuperType.isPrototypeOf(sub)); // false

雖然子對象能繼承父對象的屬性,但子對象完全不認(rèn)識父對象了。與其說是繼承,不如說是copy,而且會破壞subType本來的繼承解構(gòu)。

最后介紹的三種工廠方式算是對傳統(tǒng)的三種繼承方式的發(fā)散吧。事實(shí)上,只要掌握前三種繼承,就可以根據(jù)實(shí)際需求發(fā)散出各種滿足使用需求的繼承工具方法。

文/WoodsWalker(簡書作者)原文鏈接:http://www.jianshu.com/p/809e45e9d507
標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 免费观看欧美一级毛片 | 草久在线观看视频 | 自拍视频在线 | 中文成人在线视频 | 国产毛片一区二区三区精品 | 久久九| 成人免费看 | 午夜精品久视频在线观看 | 国产精品亚洲二区在线 | 毛片美国基地 | 亚洲天堂成人 | www成人免费视频 | 免费一级特黄a | 8888奇米四色在线 | 欧美精品99久久久久久人 | 嫩草一区二区三区四区乱码 | 精品一区二区在线欧美日韩 | 澳门毛片在线播放 | 久久99国产一区二区三区 | 久草免费在线播放 | 中文字幕天堂久久精品 | 青青热在线精品视频免费 | 国产高清一区二区三区视频 | 最近中文字幕免费视频 | 欧美激情一区二区亚洲专区 | 国产午夜小视频 | 欧美成人看片黄a免费 | 免费精品久久 | 操欧美女| 欧美激情精品久久久久久久九九九 | 欧美特黄视频在线观看 | 2022免费国产精品福利在线 | 久久久久久精 | 日本欧美一区二区 | 国产精品国产三级在线高清观看 | 六月伊人 | 2022国内精品免费福利视频 | 亚欧色视频在线观看免费 | 黄色三级在线 | 久久久久亚洲精品影视 | 国产精品线在线精品 |