javascript的2種繼承方式詳解

2021-07-11 10:19:36 字數 2624 閱讀 4053

js中繼承可以分為兩種:物件冒充和原型鏈方式

**如下:

function person(name) }

function f2e(name,id) }

var simon = new f2e('simon',9527);

simon.say();

simon.showid();

實質上是改變了this指標的指向

**如下:

function person(name) }

function f2e(name,id) }

var simon = new f2e('simon',9527);

simon.say();

simon.showid();

在oo概念中,new例項化後,物件就在堆記憶體中形成了自己的空間,值得注意的是,這個**段。而成員方法就是存在這個**段的,並且方法是共用的。問題就在這裡,通過物件冒充方式繼承時,所有的成員方法都是指向this的,也就是說new之後,每個例項將都會擁有這個成員方法,並不是共用的,這就造成了大量的記憶體浪費。並且通過物件冒充的方式,無法繼承通過prototype方式定義的變數和方法,如以下**將會出錯:

**如下:

function person(name) }

person.prototype.age = 20;

person.prototype.sayage = function();

function f2e(name,id) }

var simon = new f2e('simon',9527);

simon.sayage(); //提示typeerror: simon.sayage is not a function

二、原型鏈方式

**如下:

function person()

person.prototype.say = function()

function f2e(id) }

f2e.prototype = new person();

var simon = new f2e(9527);

simon.say();

simon.showid();

alert(simon.hasownproperty('id')); //檢查是否為自身屬性

接下來按照上面的例子來理解以下js原型鏈概念:

原型鏈可以理解成:js中每個物件均有乙個隱藏的__proto__屬性,乙個例項化物件的__proto__屬性指向其類的prototype方法,而這個prototype方法又可以被賦值成另乙個例項化物件,這個物件的__proto__又需要指向其類,由此形成一條鏈,也就是前面**中的

複製**

**如下:

f2e.prototype = new person()

這句是關鍵。js物件在讀取某個屬性時,會先查詢自身屬性,沒有則再去依次查詢原型鏈上物件的屬性。也就是說原型鏈的方法是可以共用的,這樣就解決了物件冒充浪費記憶體的缺點。

下面再來說缺點:

缺點顯而易見,原型鏈方式繼承,就是例項化子類時不能將引數傳給父類,也就是為什麼這個例子中function person()沒有引數,而是直接寫成了this.name=」simon」的原因。下面的**將不能達到預期的效果:

**如下:

function person(name)

person.prototype.say = function()

function f2e(name,id) }

f2e.prototype = new person();

var simon = new f2e("simon",9527);

simon.say();

simon.showid();

function person(name)

person.prototype.say = function()

function f2e(name,id) }

f2e.prototype = new person();  //此處無法進行傳值,this.name或者name都不行,直接寫f2e.prototype = new person('wood')是可以的,但是這樣的話simon.say()就變成了my name is wood

var simon = new f2e("simon",9527);

simon.say();  //彈出 my name is undefined

simon.showid();

最後,總結一下自認為較好的繼承實現方式,成員變數採用物件冒充方式,成員方法採用原型鏈方式,**如下:

**如下:

function person(name)

person.prototype.say = function()

function f2e(name,id)

f2e.prototype = new person();

//此處注意乙個細節,showid不能寫在f2e.prototype = new person();前面

f2e.prototype.showid = function()

var simon = new f2e("simon",9527);

simon.say();

simon.showid();

javascript的6種繼承方式

1.原型鏈繼承 原型鏈繼承的主要思想是利用原型讓乙個引用型別繼承另乙個引用型別的屬性和方法。警告 通過原型鏈繼承是,不能使用物件字面量建立原型方法,這樣會重寫原型鏈!function supertype function subtype subtype.prototype new supertype...

javascript繼承的6種方法

1 原型鏈繼承 原型鏈繼承基本思想就是讓乙個原型物件指向另乙個型別的例項 2 借用建構函式繼承 此方法為了解決原型中包含引用型別值所帶來的問題。3 組合繼承 原型 借用構造 組合繼承是將原型鏈繼承和建構函式結合起來,從而發揮二者之長的一種模式。思路就是使用原型鏈實現對原型屬性和方法的繼承,而通過借用...

JavaScript四種繼承方式

原型繼承 function person name,age person.prototype.say function function man man.prototype new person 霍頓 22 這句是重點,敲黑板 var man1 new man man1.say var man2 n...