JS實現繼承的七種方法

2021-09-26 01:37:33 字數 3069 閱讀 6788

class + extend

class 可以通過extends關鍵字實現繼承,這比 es5 的通過修改原型鏈實現繼承,要清晰和方便很多。

class colorpoint extends point 

tostring()

}

原型鏈
function parent()

parent.prototype.getage = function();

function child()

//繼承了 parent

child.prototype = new parent();

child.prototype.getname = function();

var child = new child();

child.getage() //23

問題:

包含引用型別值的原型屬性會被所有例項共享。下列**可以用來說明這個問題:

function parent()

function child(){}

//繼承了 parent

child.prototype = new parent();

var child1 = new child();

child1.friend.push('zf');

var child2 = new child();

child2.friend //["jh", "zh", "zf"]

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

借用建構函式

借用建構函式可以解決包含引用型別值的原型屬性會被所有例項共享這個問題。

function parent()

function child()

var child1 = new child();

child1.friend.push('zf');

var child2 = new child();

child2.friend //["jh", "zh"]

相對於原型鏈而言,借用建構函式有乙個很大的優勢,即可以在子型別建構函式中向超型別建構函式傳遞引數。

function parent(age)

function child()

var child = new child();

child.age //23

child.name //'xd'

問題:方法都在建構函式中定義,因此函式復用就無從談起了。

組合繼承(常用)

組合繼承的思路是使用原型鏈實現對原型屬性和方法的繼承,而通過借用建構函式來實現對例項屬性的繼承。

function parent(age)

parent.prototype.getage = function()

function child(age, name)

child.prototype = new parent();

child.prototype.constructor = child;

child.prototype.getname = function()

var child1 = new child(23, 'xd');

child1.friend.push('zf');

child1.age //23

child1.name //'xd'

child1.getname() //'xd'

child1.getage() //'23

var child2 = new child(18, 'ah');

child2.friend //['jh','zh']

原型式繼承

原型式繼承的思想就是借助原型可以基於已有的物件建立新物件,同時還不必因此建立自定義型別。

var person1 = ; 

var person2 = object.create(person1);

person2.name = "hc";

person2.friends.push("zf");

var person3 = object.create(person1);

person3.name = "xs";

person3.friends.push("ah");

person1.friends //["jh", "zh", "zf", "ah"]

在沒有必要興師動眾地建立建構函式,而只想讓乙個物件與另乙個物件保持類似的情況下,原型式繼承是完全可以勝任的。

問題:包含引用型別值的屬性始終都會共享相應的值,就像使用原型模式一樣。

寄生式繼承

寄生式繼承的思路與寄生建構函式和工廠模式類似,即建立乙個僅用於封裝繼承過程的函式,該函式在內部以某種方式來增強物件,最後再像真地是它做了所有工作一樣返回物件。

var createperson = function(parent)

return child; //返回這個物件

}var person = ;

var person2 = createperson(person);

person2.sayhi(); //'hi!'

問題:使用寄生式繼承來為物件新增函式,會由於不能做到函式復用而降低效率;這一點與建構函式模式類似。

寄生組合式繼承

所謂寄生組合式繼承,即通過借用建構函式來繼承屬性,通過原型鏈的混成形式來繼承方法。

function inheritprototype(child, parent)

function parent(age)

parent.prototype.getage = function()

function child(age, name)

inheritprototype(child, parent);

child.prototype.getname = function()

C qsort的七種方法

在c 中qsort 排序函式的使用qsort函式應用大全 七種qsort排序方法 本文中排序都是採用的從小到大排序 一 對int型別陣列排序 int num 100 sample int cmp const void a const void b qsort num,100,sizeof num 0...

七種方法實現單例模式

三 懶漢式應用例項 四 雙重檢查 推薦使用 五 靜態內部類 推薦使用 六 列舉 推薦使用 所謂類的單例設計模式,就是採取一定的方法保證在整個的軟體系統中,對某個類只能存在乙個物件例項,並且該類只提供乙個取得其物件例項的方法 靜態方法 比如hibernate的sessionfactory,它充當資料儲...

js重新整理框架子頁面的七種方法

下面以三個頁面分別命名為framedemo.html,top.html,button.html為例來具體說明如何做。其中framedemo.html由上下兩個頁面組成,如下 現在假設top.html即上面的頁面有乙個button來實現對下面頁面的重新整理,可以用以下七種語句,哪個好用自己看著辦了。語...