Js繼承的實現方式

2022-01-10 12:43:51 字數 2710 閱讀 3148

繼承是物件導向軟體技術當中的乙個概念,與多型、封裝共為物件導向的三個基本特徵。繼承可以使得子類具有父類的屬性和方法或者重新定義、追加屬性和方法等。

通過將子類的原型物件指向父類的例項,實現繼承訪問父類屬性方法等。

// 定義父類

function parent()

}// 定義子類

function child()

child.prototype = new parent(); // 將子類的原型物件指向父類的例項

child.prototype.construce = child; // 修復constructor使符合原型鏈規定

var child = new child(); // 例項化子類

child.say(); // child // 此時子類能夠訪問父類的say方法,在查詢name屬性的時候首先在自身屬性中查詢成功所以不再向上查詢,若子類沒有name成員,則會列印parent

console.log(child instanceof parent); // true // 判斷child的建構函式child的prototype物件是否在parent的原型鏈上

// 定義父類

function parent(from)

this.from = from;

}// 定義子類

function child(from)

var child = new child("child"); // 例項化子類

child.say(); // child

console.log(child.from); // child

為父類例項增加成員與方法,作為例項返回。

// 定義父類

function parent(from)

this.from = from;

}// 定義子類

function child(from)

var child = new child("child"); // 例項化子類

child.say(); // child

console.log(child.from); // child

通過直接將父類的屬性拷貝到子類的原型中實現繼承。

// 定義父類

function parent(from)

this.from = from;

}// 定義子類

function child(from)

var child = new child("child"); // 例項化子類

child.say(); // child

console.log(child.from); // child

通過共享原型物件實現繼承。

// 定義父類

function parent(){}

parent.prototype.name = "parent";

parent.prototype.say = function()

// 定義子類

function child(from)

child.prototype = parent.prototype; // 共享原型

child.prototype.construce = child;

var child = new child("child"); // 例項化子類

child.say(); // child

組合原型鏈繼承和借用建構函式繼承,結合了兩種模式的優點,傳參和復用。

// 定義父類

function parent(from)

this.from = from;

}// 定義子類

function child(from)

child.prototype = new parent();

child.prototype.construce = child;

var child = new child("child"); // 例項化子類

child.say(); // child

console.log(child.from); // child

通過寄生方式,砍掉父類的例項屬性,在呼叫兩次父類的構造的時候,就不會初始化兩次例項方法和屬性,避免的組合繼承的缺點。

// 定義父類

function parent(from)

this.from = from;

}// 定義子類

function child(from)

var f = function(){}; // 建立乙個沒有例項方法的類

f.prototype = parent.prototype; // 淺拷貝父類原型

child.prototype = new f(); // 例項化f,此時沒有例項化方法呼叫,同時將原型鏈建立

child.prototype.construce = child;

var child = new child("child"); // 例項化子類

child.say(); // child

console.log(child.from); // child

JS繼承的實現方式

前言 js作為物件導向的弱型別語言,繼承也是其非常強大的特性之一。那麼如何在js中實現繼承呢?讓我們拭目以待。既然要實現繼承,那麼首先我們得有乙個父類,如下 定義乙個動物類 function animal name 原型方法 animal.prototype.eat function food 核心...

JS繼承的實現方式

前言 js作為物件導向的弱型別語言,繼承也是其非常強大的特性之一。那麼如何在js中實現繼承呢?讓我們拭目以待。既然要實現繼承,那麼首先我們得有乙個父類,如下 定義乙個動物類 function animal name 原型方法 animal.prototype.eat function food 核心...

JS繼承的實現方式

既然要實現繼承,那麼首先我們得有乙個父類,如下 定義乙個動物類 function animal name 原型方法 animal.prototype.eat function food 核心 將父類的例項作為子類的原型 function cat cat.prototype new animal ca...