繼承知識點

1、原型鏈繼承

將子類（構造函數）的原型 指向父類（構造函數）的實例。

function Father() {

this.name = 'Fname';

this.likes = ['read', 'travel'];

}

Father.prototype.getName = function() {

return this.name

}

function Son(age) {

this.age = age

}

//重寫子類原型使其指向父類的實例

Son.prototype = new Father();

//需之后添加原型方法,否則會被重寫覆蓋

Son.prototype.getAge = function(){

return this.age

}

var son1 = new Son(20)

//順著原型鏈可訪問父類屬性及原型方法

console.log(son1.name) // Fname

console.log(son1.getName()) //Fname

缺點：

⑴ 原型中的所有屬性被所有實例共享 ，如有更改 ，引用類型會互相影響 ，基本類型會在實例中新創建，對原型無影響。

var son2 = new Son(16)

son1.name = 'Sname';

son1.likes.push('eat');

son2.name //Fname

son2.likes //["read","travel", "eat"]

son1.name //Sname

son1.likes //["read","travel", "eat"]

⑵創建子類實例時，無法向父類構造函數傳參，使不同的子類實例擁有不同的父類屬性值, 例如讓每個子類實例擁有各自的name值和likes值。雖然在創建父類的實例時可以傳一次參, 但得到的是共享的屬性值。

2、借用構造函數繼承

使用call或apply 在子類構造函數中調用父類構造函數。

//解決引用類型共享問題,每個子類實例擁有自己的屬性

function Father() {

this.arr = [1,2,3]

}

function Son() {

Father.call(this)

}

var son1 = new Son()

var son2 = new Son()

son2.arr.push(4)

console.log(son2.arr) //[1,2,3,4]

console.log(son1.arr) //[1,2,3]

//解決傳參問題:每個子類實例繼承了父類屬性且擁有各自的值

function Father(name) {

this.name = name

}

function Son(name) {

Father.call(this, name)

}

var son1 = new Son("aa")

console.log(son1.name) //aa

var son2 = new Son("bb")

console.log(son2.name) //bb

缺點：

如果方法都在構造函數中定義，沒有了 函數復用性。每個實例都創建了一份函數副 本，占資源。

3、組合繼承（常用）

原型鏈+借用構造函數。共享的方法和屬性通過原型鏈繼承， 實例各自的屬性通過借用構造函數繼承。

function Father(name) {

this.name = name

this.arr = [1,2,3]

}

Father.prototype.getName = function() {

console.log(this.name)

}

function Son(name, age) {

Father.call(this, name)

this.age = age

}

Son.prototype = new Father()

Son.prototype.constructor = Son

Son.prototype.getAge = function() {

console.log(this.age)

}

var son1 = new Son("xiao",20)

son1.arr.push(4)

console.log(son1.arr) //[1,2,3,4]

son1.getName() //xiao

son1.getAge() //20

var son2 = new Son("lulu", 16)

console.log(son2.arr) //[1,2,3]

son2.getName() //lulu

son2.getAge() //16

除此還有原型式繼承，寄生式繼承，寄生組合式繼承。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。