11 繼承的實現方式及比較

2021-10-10 22:03:08 字數 2179 閱讀 4023

1、簡單原型鏈繼承

function

super()

function

sub(

)sub.prototype =

newsuper()

;// 核心

var sub1 =

newsub()

;var sub2 =

newsub()

;sub1.val =2;

sub1.arr.

push(2

);alert

(sub1.val)

;// 2

alert

(sub2.val)

;// 1

alert

(sub1.arr)

;// 1, 2

alert

(sub2.arr)

;// 1, 2

優點:簡單,易於實現

缺點:1.修改sub1.arr後sub2.arr也變了,因為來自原型物件的引用屬性是所有例項共享的。

(原因:執行sub1.arr.push(2);先對sub1進行屬性查詢,找遍了例項屬性(在本例中沒有例項屬性),沒找到,就開始順著原型鏈向上找,拿到了sub1的原型物件,一搜身,發現有arr屬性。於是給arr末尾插入了2,所以sub2.arr也變了)

2.建立子類例項時,無法向父類建構函式傳參

2、建構函式繼承

function

super

(val)

}function

sub(val)

var sub1 =

newsub(1

);var sub2 =

newsub(2

);sub1.arr.

push(2

);alert

(sub1.val)

;// 1

alert

(sub2.val)

;// 2

alert

(sub1.arr)

;// 1, 2

alert

(sub2.arr)

;// 1

alert

(sub1.fun === sub2.fun)

;// false,因為sub1和sub2各自擁有fun,它們的記憶體位址是不同的

優點:

1.解決了子類例項共享父類引用屬性的問題

2.建立子類例項時,可以向父類建構函式傳參

缺點:1.無法實現函式復用,每個子類例項都持有乙個新的fun函式,如果例項太多,會造成記憶體大量被占用

2.父類prototype裡的東西不能獲取到

3、

function

parent

(value)

parent.prototype.

fun=

function()

function

sub(value)

sub.prototype =

newparent()

var sub1 =

newsub(1

)var sub2 =

newsub(2

) console.

log(sub1.value)

//1 console.

log(sub2.value)

//2 console.

log(sub1.fun == sub2.fun)

//true

說明:

1.把例項函式都放在原型物件上,以實現函式復用。同時還要保留借用建構函式方式的優點,通過parent.call(this,value)繼承父類的基本屬性和引用屬性並保留能傳參的優點;通過sub.prototype = new parent()繼承父類函式,實現函式復用;

2.優點:

不存在引用屬性共享問題;

可傳參;

函式可復用;

3.缺點

子類原型上有乙份多餘的父類例項屬性,因為父類建構函式被呼叫了兩次,生成了兩份,而子類例項上的那乙份遮蔽了子類原型上的。。。又造成了記憶體浪費:

例如:console.log(sub1)

繼承的實現方式

寫在前邊,先建立乙個父類,用於後邊的繼承。如下 定義乙個動物類 function animal name is sleeping 原型方法 animal.prototype.eat function food is eating 複製 核心 將父類的例項作為子類的原型 function cat ca...

實現繼承的幾種方式及工作原理

function animal animal.prototype function dog dog.prototype new animal dog.prototype.saycolor function var dog new dog var dog1 new dog console.log do...

js繼承,原型實現繼承的優缺點及解決方式

function parent function child 2.原型繼承 function human function man man.prototype new human var m new man 此時man.name teacher man.age 39 三,組合繼承 使用原型鏈實現對原...