js的2種繼承方式詳解

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();

js的2種繼承方式詳解

javascript的2種繼承方式詳解

js繼承的四種方式,例項詳解

js繼承的7種方式

js的2種繼承方式詳解

javascript的2種繼承方式詳解

js繼承的四種方式,例項詳解

js繼承的7種方式

相關推薦