JavaScript實現(xiàn)繼承的6種常用方式總結(jié)
JavaScript想實現(xiàn)繼承的目的:重復(fù)利用另外一個對象的屬性和方法。
1.原型鏈繼承
讓一個構(gòu)造函數(shù)的原型是另一個類型的實例,那么這個構(gòu)造函數(shù)new出來的實例就具有該實例的屬性。
當(dāng)試圖訪問一個對象的屬性時,它不僅僅在該對象上搜尋,還會搜尋該對象的原型,以及該對象的原型的原型,依次層層向上搜索,直到找到一個名字匹配的屬性或到達原型鏈的末尾。
function Parent() { this.isShow = true this.info = { name: "mjy", age: 18, }; } Parent.prototype.getInfo = function() { console.log(this.info); console.log(this.isShow); } function Child() {}; Child.prototype = new Parent(); let Child1 = new Child(); Child1.info.gender = "男"; Child1.getInfo(); // {name: 'mjy', age: 18, gender: '男'} ture let child2 = new Child(); child2.isShow = false console.log(child2.info.gender) // 男 child2.getInfo(); // {name: 'mjy', age: 18, gender: '男'} false
優(yōu)點:寫法方便簡潔,容易理解。
缺點:對象實例共享所有繼承的屬性和方法。傳教子類型實例的時候,不能傳遞參數(shù),因為這個對象是一次性創(chuàng)建的(沒辦法定制化)。
2.借用構(gòu)造函數(shù)繼承
function Parent(gender) { this.info = { name: "yhd", age: 19, gender: gender } } function Child(gender) { Parent.call(this, gender) } let child1 = new Child('男'); child1.info.nickname = 'xiaoma' console.log(child1.info); let child2 = new Child('女'); console.log(child2.info);
在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用父類型構(gòu)造函數(shù);使用 apply() 或 call() 方法將父對象的構(gòu)造函數(shù)綁定在子對象上。
優(yōu)點:解決了原型鏈實現(xiàn)繼承的不能傳參的問題和父類的原型共享的問題。
缺點:借用構(gòu)造函數(shù)的缺點是方法都在構(gòu)造函數(shù)中定義,因此無法實現(xiàn)函數(shù)復(fù)用。在父類型的原型中定義的方法,對子類型而言也是不可見的,結(jié)果所有類型都只能使用構(gòu)造函數(shù)模式。
3.組合繼承(經(jīng)典繼承)
將 原型鏈 和 借用構(gòu)造函數(shù) 的組合到一塊。使用原型鏈實現(xiàn)對原型屬性和方法的繼承,而通過借用構(gòu)造函數(shù)來實現(xiàn)對實例屬性的繼承。這樣,既通過在原型上定義方法實現(xiàn)了函數(shù)復(fù)用,又能夠保證每個實例都有自己的屬性
function Person(gender) { console.log('執(zhí)行次數(shù)'); this.info = { name: "mjy", age: 19, gender: gender } } Person.prototype.getInfo = function () { // 使用原型鏈繼承原型上的屬性和方法 console.log(this.info.name, this.info.age) } function Child(gender) { Person.call(this, gender) // 使用構(gòu)造函數(shù)法傳遞參數(shù) } Child.prototype = new Person() let child1 = new Child('男'); child1.info.nickname = 'xiaoma' child1.getInfo() console.log(child1.info); let child2 = new Child('女'); console.log(child2.info);
優(yōu)點就是解決了原型鏈繼承和借用構(gòu)造函數(shù)繼承造成的影響。
缺點是無論在什么情況下,都會調(diào)用兩次超類型構(gòu)造函數(shù):一次是在創(chuàng)建子類型原型的時候,另一次是在子類型構(gòu)造函數(shù)內(nèi)部
4.原型式繼承
方法一:借用構(gòu)造函數(shù)
在一個函數(shù)A內(nèi)部創(chuàng)建一個臨時性的構(gòu)造函數(shù),然后將傳入的對象作為這個構(gòu)造函數(shù)的原型,最后返回這個臨時類型的一個新實例。本質(zhì)上,函數(shù)A是對傳入的對象執(zhí)行了一次淺復(fù)制。
function createObject(obj) { function Fun() {} Fun.prototype = obj return new Fun() } let person = { name: 'mjy', age: 18, hoby: ['唱', '跳'], showName() { console.log('my name is:', this.name) } } let child1 = createObject(person) child1.name = 'xxxy' child1.hoby.push('rap') let child2 = createObject(person) console.log(child1) console.log(child2) console.log(person.hoby) // ['唱', '跳', 'rap']
方法二:Object.create()
Object.create() 是把現(xiàn)有對象的屬性,掛到新建對象的原型上,新建對象為空對象
ECMAScript 5通過增加Object.create()方法將原型式繼承的概念規(guī)范化了。這個方法接收兩個參數(shù):作為新對象原型的對象,以及給新對象定義額外屬性的對象(第二個可選)。在只有一個參數(shù)時,Object.create()與這里的函數(shù)A方法效果相同。
let person = { name: 'mjy', age: 19, hoby: ['唱', '跳'], showName() { console.log('my name is: ', this.name) } } let child1 = Object.create(person) child1.name = 'xxt' child1.hoby.push('rap') let child2 = Object.create(person) console.log(child1) console.log(child2) console.log(person.hoby) // ['唱', '跳', 'rap']
優(yōu)點是:不需要單獨創(chuàng)建構(gòu)造函數(shù)。
缺點是:屬性中包含的引用值始終會在相關(guān)對象間共享,子類實例不能向父類傳參
5.寄生式繼承
寄生式繼承的思路與(寄生) `原型式繼承` 和 `工廠模式` 似, 即創(chuàng)建一個僅用于封裝繼承過程的函數(shù),該函數(shù)在內(nèi)部以某種方式來增強對象,最后再像真的是它做了所有工作一樣返回對象。
function objectCopy(obj) { function Fun() { }; Fun.prototype = obj; return new Fun(); } function createAnother(obj) { let clone = objectCopy(obj); clone.showName = function () { console.log('my name is:', this.name); }; return clone; } let person = { name: "mjy", age: 18, hoby: ['唱', '跳'] } let child1 = createAnother(person); child1.hoby.push("rap"); console.log(child1.hoby); // ['唱', '跳', 'rap'] child1.showName(); // my name is: mjy let child2 = createAnother(person); console.log(child2.hoby); // ['唱', '跳', 'rap']
優(yōu)點:寫法簡單,不需要單獨創(chuàng)建構(gòu)造函數(shù)。
缺點:通過寄生式繼承給對象添加函數(shù)會導(dǎo)致函數(shù)難以重用。使用寄生式繼承來為對象添加函數(shù), 會由于不能做到函數(shù)復(fù)用而降低效率;這一點與構(gòu)造函數(shù)模式類似.
6.寄生組合式繼承
前面講過,組合繼承是常用的經(jīng)典繼承模式,不過,組合繼承最大的問題就是無論什么情況下,都會調(diào)用兩次父類構(gòu)造函數(shù);一次是在創(chuàng)建子類型的時候,一次是在子類型的構(gòu)造函數(shù)內(nèi)部。寄生組合繼承就是為了降低父類構(gòu)造函數(shù)的開銷而實現(xiàn)的。
通過借用構(gòu)造函數(shù)來繼承屬性,通過原型鏈的混成形式來繼承方法。本質(zhì)上,就是使用寄生式繼承來繼承超類型的原型,然后再將結(jié)果指定給子類型的原型。
function objectCopy(obj) { function Fun() { }; Fun.prototype = obj; return new Fun(); } function inheritPrototype(child, parent) { let prototype = objectCopy(parent.prototype); prototype.constructor = child; Child.prototype = prototype; } function Parent(name) { this.name = name; this.hoby = ['唱', '跳'] } Parent.prototype.showName = function () { console.log('my name is:', this.name); } function Child(name, age) { Parent.call(this, name); this.age = age; } inheritPrototype(Child, Parent); Child.prototype.showAge = function () { console.log('my age is:', this.age); } let child1 = new Child("mjy", 18); child1.showAge(); // 18 child1.showName(); // mjy child1.hoby.push("rap"); console.log(child1.hoby); // ['唱', '跳', 'rap'] let child2 = new Child("yl", 18); child2.showAge(); // 18 child2.showName(); // yl console.log(child2.hoby); // ['唱', '跳']
優(yōu)點是:高效率只調(diào)用一次父構(gòu)造函數(shù),并且因此避免了在子原型上面創(chuàng)建不必要,多余的屬性。與此同時,原型鏈還能保持不變;
缺點是:代碼復(fù)雜
7.ES6、Class實現(xiàn)繼承
原理ES5 的繼承,實質(zhì)是先創(chuàng)造子類的實例對象this,然后再將父類的方法添加到this上面(Parent.apply(this))。 ES6 的繼承機制完全不同,實質(zhì)是先將父類實例對象的屬性和方法,加到this上面(所以必須先調(diào)用super方法),然后再用子類的構(gòu)造函數(shù)修改this
優(yōu)點:語法簡單易懂,操作更方便。
缺點:并不是所有的瀏覽器都支持class關(guān)鍵字 lass Per
以上就是JavaScript實現(xiàn)繼承的6種常用方式總結(jié)的詳細內(nèi)容,更多關(guān)于JavaScript繼承的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript實現(xiàn)阿拉伯?dāng)?shù)字和中文數(shù)字互相轉(zhuǎn)換
JavaScript實現(xiàn)阿拉伯?dāng)?shù)字和中文數(shù)字互相轉(zhuǎn)換可以用數(shù)組的循環(huán)檢測后的替換來實現(xiàn),下面主要講解其中的一些核心算法:2016-06-06微信小程序防止多次點擊跳轉(zhuǎn)和防止表單組件輸入內(nèi)容多次驗證功能(函數(shù)防抖)
這篇文章主要介紹了微信小程序防止多次點擊跳轉(zhuǎn)和防止表單組件輸入內(nèi)容多次驗證功能(函數(shù)防抖),需要的朋友可以參考下2019-09-09火狐瀏覽器(firefox)下獲得Event對象以及keyCode
firefox Event對象2008-11-11JavaScript實現(xiàn)DIV層拖動及動態(tài)增加新層的方法
這篇文章主要介紹了JavaScript實現(xiàn)DIV層拖動及動態(tài)增加新層的方法,設(shè)計javascript操作div層的拖動與增加的相關(guān)技巧,需要的朋友可以參考下2015-05-05比較詳細的javascript對象的property和prototype是什么一種關(guān)系
比較詳細的javascript對象的property和prototype是什么一種關(guān)系...2007-08-08