JS複習 繼承 原型鏈

2021-08-17 02:29:53 字數 2208 閱讀 3694

繼承

介面繼承和實現繼承。

介面繼承只繼承方法簽名,而實現繼承則繼承實際的方法。由於函式沒有簽名,在esmascript中無法實現介面繼承。

esmascript只支援實現繼承,而且其實現繼承主要是依靠

原型鏈來實現的。

原型鏈

基本思想:利用原型讓乙個引用型別繼承另乙個引用型別的屬性和方法。

建構函式、原型和例項的關係:每個建構函式都有乙個原型物件,原型物件都包含乙個指向建構函式的指標,而例項都包含乙個指向原型物件的內部指標。

基本概念:那麼,假如我們讓原型物件等於另乙個型別的例項,結果會怎麼樣呢?顯然,此時的原型物件將包含乙個指向另乙個原型物件的指標,相應地,另乙個原型物件也包含著乙個指向另乙個建構函式的指標。假如另乙個原型又是另乙個型別的例項,那麼上述關係依然成立,如此層層遞進,就構成了例項與原型的鏈條。

實現的本質是重寫原型物件,代之以乙個新型別的例項。

別忘記預設的原型

所有函式的預設原型都是object的例項,因此預設原型都會包含乙個內部指標,指向object.prototype。這也正是所有自定義型別都會繼承tostring()、valueof()等預設方法的

根本原因。

確定原型和例項的關係

1.使用

instanseof操作符,只要用這個操作符來測試例項與原型鏈中出現過的建構函式,結果就會返回true。

alert(instance instanceof object);

2.使用

isprototypeof()方法,只要是原型鏈中出現過的原型,都可以說是該原型鏈所派生的例項的原型。

alert(object.prototype.isprototypeof(instance));

謹慎地定義方法

子型別有時候需要覆蓋超型別中的某個方法,或者需要新增超型別中不存在的某個方法。但不管怎樣,

給原型新增方法的**一定要放在替換原型的語句之後(即先繼承,再新增或重寫方法)。

注意,在通過原型鏈實現繼承時,不能使用物件字面量建立原型方法。因為這樣做會重寫原型鏈。

原型鏈的問題

1、最主要的問題來自包含引用型別值的原型。包含引用型別值的原型屬性會被所有例項共享;在通過原型來實現繼承時,原型實際上會變成另乙個型別的例項。於是,原先的例項屬性也就順理成章地變成了現在的原型屬性了。

2、在建立子型別的例項時,不能向超型別的建構函式中傳遞引數。

借用建構函式

在解決原型中包含引用型別值所帶來問題的過程中,開發人員開始使用一種叫做

借用建構函式的技術。

基本思想:在子型別建構函式的內部呼叫超型別建構函式。

傳遞引數

相對於原型鏈而言,借用建構函式有乙個很大的

優勢:即可以在子型別建構函式中向超型別建構函式傳遞引數。

為了確保supertype建構函式不會重寫子型別的屬性,可以在呼叫超型別建構函式後,再新增應該在子型別中定義的屬性。

借用建構函式的問題

1、方法都在建構函式中定義,因此函式復用就無從談起了;

2、在超型別的原型中定義的方法,對子型別而言也是不可見的,結果所有型別都只能使用建構函式模式。

組合繼承

也叫經典繼承,指的是將原型鏈和借用建構函式的技術組合到一塊,從而發揮二者之長的一種繼承模式。

思路:使用原型鏈實現對原型屬性和方法的繼承,而通過借用建構函式來實現對例項屬性的繼承。這樣,既通過在原型上定義方法實現了函式復用,又能保證每個例項都有它自己的屬性。

原型式繼承

思路:借助原型可以基於已有的物件建立新物件,同時還不必因此建立自定義型別。

可以在不必預先定義建構函式的情況下現繼承,其本質是執行對給定物件的淺複製。而複製得到的副本還可以得到進一步改造。

寄生式繼承

與原型式繼承非常相似,也是基於某個物件或某些資訊建立乙個物件,然後增強物件,最後返回物件。為了解決組合繼承模式由於多次呼叫超型別建構函式而導致的低效率問題,可以將這個模式與組合繼承一起使用。

寄生組合式繼承

集寄生式繼承和組合繼承的優點於一身,是實現基於型別繼承的最有效方式。

js繼承,原型鏈繼承

1 乙個型別的物件能夠訪問另外乙個型別的屬性和方法 2 類與類之間的關係 類就是眾多例項共有的屬性和方法的乙個抽象 function animal name animal.prototype.say function function dog 把子類的原型指向父類的例項 dog.prototype ...

js 原型鏈繼承

建構函式的prototype的 proto 預設指向object.prototype,是繼承object。function animal age animal.prototype.getage function animal.prototype.eat function function dog n...

js原型鏈繼承

function foo var foo newfoo console.log foo.proto foo.prototype true console.log foo.proto foo.constructor.prototype ture function foo var foo newfoo ...