av一区二区在线观看_亚洲男人的天堂网站_日韩亚洲视频_在线成人免费_欧美日韩精品免费观看视频_久草视

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

js中實現(xiàn)繼承的五種方法

瀏覽:85日期:2024-04-06 17:27:22
借用構(gòu)造函數(shù)

這種技術(shù)的基本思想很簡單,就是在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型的構(gòu)造函數(shù)。另外,函數(shù)只不過是在特定環(huán)境中執(zhí)行代碼的對象,因此通過使用apply()和call()方法也可以在新創(chuàng)建的對象上執(zhí)行構(gòu)造函數(shù)。

function Box(name){ this.name = name}Box.prototype.age = 18function Desk(name){ Box.call(this, name) // 對象冒充,對象冒充只能繼承構(gòu)造里的信息}var desk = new Desk(’ccc’)console.log(desk.name) // --> cccconsole.log(desk.age) // --> undefined

從中可以看到,繼承來的只有實例屬性,而原型上的屬性是訪問不到的。這種模式解決了兩個問題,就是可以傳參,可以繼承,但是沒有原型,就沒有辦法復(fù)用。

組合繼承

function Box(name){ this.name = name}Box.prototype.run = function (){ console.log(this.name + ’正在運行...’)}function Desk(name){ Box.call(this, name) // 對象冒充}Desk.prototype = new Box() // 原型鏈var desk = new Desk(’ccc’)console.log(desk.name) // --> cccdesk.run() // --> ccc正在運行...

這種繼承方式的思路是:用使用原型鏈的方式來實現(xiàn)對原型屬性和方法的繼承,而通過借用構(gòu)造函數(shù)來實現(xiàn)對實例屬性的繼承。

原型式繼承

原型式繼承:是借助原型可以基于已有的對象創(chuàng)建新對象,同時還不必因此創(chuàng)建自定義類型。講到這里必須得提到一個人,道格拉斯·克羅克福德在2006年寫的一篇文章《Prototype inheritance in Javascript》(Javascript中的原型式繼承)中給出了一個方法:

function object(o) { //傳遞一個字面量函數(shù) function F(){} //創(chuàng)建一個構(gòu)造函數(shù) F.prototype = o; //把字面量函數(shù)賦值給構(gòu)造函數(shù)的原型 return new F() //最終返回出實例化的構(gòu)造函數(shù)}

看如下的例子:

function obj(o) { function F (){} F.prototype = o; return new F()}var box = { name: ’ccc’, age: 18, family: [’哥哥’,’姐姐’]}var box1 = obj(box)console.log(box1.name) // --> cccbox1.family.push(’妹妹’)console.log(box1.family) // --> ['哥哥', '姐姐', '妹妹']var box2 = obj(box)console.log(box2.family) // --> ['哥哥', '姐姐', '妹妹']

因為上述的代碼的實現(xiàn)邏輯跟原型鏈繼承很類似,所以里面的引用數(shù)組,即family屬性被共享了。

寄生式繼承

function obj(o) { function F (){} F.prototype = o; return new F()}function create(o){ var clone = obj(o) // 通過調(diào)用函數(shù)創(chuàng)建一個新對象 clone.sayName = function(){ // 以某種方式來增強(qiáng)這個對象 console.log(’hi’) } return clone // 返回這個對象}var person = { name: ’ccc’, friends: [’aa’,’bb’]}var anotherPerson = create(person)anotherPerson.sayName() // --> hi

這個例子中的代碼基于person返回一個新對象————anotherPerson。新對象不僅具有person的所有屬性和方法,而且還有自己的sayHi()方法。在主要考慮對象而不是自定義類型和構(gòu)造函數(shù)的情況下,寄生式繼承也是一種有用的模式。使用寄生式繼承來為對象添加函數(shù),會由于不能做到函數(shù)復(fù)用而降低效率,這一點與構(gòu)造函數(shù)模式類似。

寄生組合式繼承

前面說過,組合繼承是Javascript最常用的繼承模式,不過,它也有自己的不足。組合繼承最大的問題就是無論什么情況下,都會調(diào)用過兩次超類型構(gòu)造函數(shù):一次是在創(chuàng)建子類型原型的時候,另一次是在子類型構(gòu)造函數(shù)內(nèi)部。沒錯,子類型最終會包含超類型對象的全部實例屬性,但我們不得不在調(diào)用子類型構(gòu)造函數(shù)時重寫這些屬性,再來看一下下面的例子:

function SuperType(name){ this.name = name; this.colors = [’red’,’black’]}SuperType.prototype.sayName = function (){ console.log(this.name)}function SubType(name, age){ SuperType.call(this, name) // 第二次調(diào)用SuperType this.age = age}SubType.prototype = new SuperType() // 第一次調(diào)用SuperTypeSubType.prototype.constructor = SubTypeSubType.prototype.sayAge = function (){ console.log(this.age)}

第一次調(diào)用SuperType構(gòu)造函數(shù)時,SubType.prototype會得到兩個屬性:name和colors。他們都是SuperType的實例屬性,只不過現(xiàn)在位于SubType的原型中。當(dāng)調(diào)用SubType構(gòu)造函數(shù)時,又會調(diào)用一次SuperType構(gòu)造函數(shù),這個一次又在新對象上創(chuàng)建了實例屬性name和colors。于是,這兩個屬性就屏蔽了原型中的兩個同名屬性。即有兩組name和colors屬性:一組在實例上,一組在原型上。這就是調(diào)用兩次SuperType構(gòu)造函數(shù)的結(jié)果。解決這個問題的方法就是————寄生組合式繼承。所謂寄生組合式繼承,即通過借用構(gòu)造函數(shù)來繼承屬性,通過原型鏈的混成形式來繼承方法。其背后的基本思路是:不必為了制定子類型的原型而調(diào)用超類型的構(gòu)造函數(shù),我們所需要的無非就是超類型原型的一個副本而已。本質(zhì)上,就是使用寄生式繼承來繼承超類型的原型,然后再將結(jié)果指定給子類型的原型。寄生組合式繼承的基本模式如下:

function object(o) { function F (){} F.prototype = o; return new F()}function inheritPtototype(subType, superType){ var prototype = object(superType.prototype) // 創(chuàng)建對象 prototype.constructor = subType // 增強(qiáng)對象 subType.prototype = prototype// 指定對象}function SuperType(name){ this.name = name this.colors = [’red’, ’white’]}SuperType.prototype.sayName = function(){ console.log(this.name)}function SubType(name,age){ SuperType.call(this,name) this.age = age}inheritPtototype(SubType, SuperType)SubType.prototype.sayAge = function(){ console.log(this.age)}var instance = new SubType(’ccc’, 18)instance.sayName() // --> cccinstance.sayAge() // --> 18console.log(instance)

控制臺打印出的結(jié)構(gòu):

js中實現(xiàn)繼承的五種方法

詳細(xì)的圖解:

js中實現(xiàn)繼承的五種方法

這個例子的高效率提現(xiàn)在它值調(diào)用了一次SuperType構(gòu)造函數(shù),并且因此避免了在SubType.prototype上面創(chuàng)建不必要的、多余的屬性。與此同時,原型鏈還能保持不變;因此,還能夠正常使用instanceof和isPrototypeOf()。這也是很多大廠用的繼承方式。

以上就是js中實現(xiàn)繼承的五種方法的詳細(xì)內(nèi)容,更多關(guān)于js 實現(xiàn)繼承的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 日韩综合 | 中文字幕在线观看第一页 | 天天艹天天干天天 | 久热免费在线 | 超碰在线97国产 | 国产精品久久一区 | 国产在线精品区 | 亚洲国产一 | 欧美久久久久久 | 天天精品综合 | 久久在视频 | 久久www免费视频 | 亚洲精品在线播放 | 亚洲精品久久久久国产 | 亚洲日韩视频 | 精品99久久 | 久久一区精品 | 成人精品国产一区二区4080 | 亚洲精品在线视频 | 国产精品视频一区二区三区四区国 | 蜜桃一区二区三区 | 欧美在线观看一区 | 成人夜晚看av | 亚洲一区二区三 | 日韩精品免费视频 | 久久久蜜桃一区二区人 | 91精品国产乱码久久久久久久久 | 欧美精品一二区 | 日本三级电影在线看 | 国产高清精品一区二区三区 | 日韩在线小视频 | 亚洲精品久久久久久下一站 | 国产ts一区| 一区二区三区精品 | 久久久国产一区二区三区 | 亚洲一区二区视频 | 国产精品视频导航 | 国产毛片在线看 | 成人精品福利 | 欧美日韩一区二区三区四区 | 国产区视频在线观看 |