JS中的繼承方式總結

1. 原型鏈繼承(又稱類繼承)

child.prototype = new parent();

1
function
parent (name, age) 
5 parent.prototype.say = function
();8
function
child() 
10child.prototype = new parent('pursue');


11var child1 = new
child();
12 child1.say(); //
hello, my name is pursue
13var child2 = new
child();
14 console.log(child1.say === child2.say);//
true
15 console.log(child1.name === child2.name);//
true

通過子類的原型prototype對父類例項化實現。利用將父類例項賦值給子類原型，達到繼承的目的：子類原型可訪問父類原型上的屬性和方法以及父類建構函式中複製的屬性和方法(類的建構函式中的屬性和方法會在例項化物件的時候複製的該例項化物件中去)

child.prototype instanceof parent //true

缺點一：父類的共有屬性是引用型別時，子類的乙個例項更改子類原型從父類建構函式繼承來的該屬性時，會直接引起子類其他例項中該繼承屬性值的變化。

缺點二：子類通過原型prototype實現對父類的例項化而實現繼承，因此不能在建立父類的時候給父類傳參，所以在例項化父類的是無法對父類建構函式內的屬性進行初始化。

2. call(thisobj, param1, param2,...)　　// 建構函式繼承

1
function
parent(username)6}
parent.prototype.show = function() 
7function
child(username,password)13}
14var parent = new parent("zhangsan");
15var child = new child("lisi","123456");
16parent.hello();
17child.hello();
18 child.world();
child.show(); //typeerror

1
function
parent(username)6}
parent.prototype.show = function() 
7function
child(username,password)13}
14var parent = new parent("zhangsan");
15var child = new child("lisi","123456");
16parent.hello();
17child.hello();
18 child.world();
child.show(); //typeerror

2，3 為建構函式式繼承方式，通過在子類的建構函式作用環境中執行一次父類的建構函式實現，優化了 1 中的兩個缺點，但是由於是通過建構函式繼承的，故父類原型中的方法子類是無法呼叫到的，所以有了下面的組合繼承方式。

1
function
parent(hello)
4 parent.prototype.sayhello = function()7
function
child(hello,world)
12child.prototype = new parent();//
將父類原型中的的方法繼承過來
13 child.prototype.sayworld = function()
16var c = new child("zhangsan","lisi");
17c.sayhello();
18 c.sayworld();

① 在子類建構函式中執行父類建構函式，② 在子類原型上例項化父類

5.寄生組合繼承，與4相似，只是將原型鏈換做了object.create(parent.prototype)

1
function
parent(hello)
4 parent.prototype.sayhello = function()7
function
child(hello,world)
12child.prototype = object.create(parent.prototype);//
將父類的方法繼承過來
13 child.prototype.sayworld = function()
16var c = new child("zhangsan","lisi");
17c.sayhello();
18 c.sayworld();

6.擴充套件object類

object.prototype.方法名 = function (parentobject) 6}

78function

child(pwd) 13}

1415 object.prototype.show = function

(parentobject) 19}

20var p = new parent('zhangsan')；

2122

var c = new child(12345);

23c.show(p);

2425 c.syahi(); //

zhangsan

26 c.info(); //

zhangsan,12345

7. 物件冒充　　在b(子類)的建構函式中，定義屬性 bb = a(父類)的建構函式，在b的建構函式的最後再將bb刪除

1
function
parent (name) 6}
78function
child(name) 
1314
var p = new parent('父類')；
15 p.show(); //
name is 父類
1617
var c = new child('子類');
18 c.show(); //
name is 子類

JS中的繼承方式總結

js實現繼承的方式總結

js中的幾種繼承方式

JS中的多種繼承方式

JS中的繼承方式總結

js實現繼承的方式總結

js中的幾種繼承方式

JS中的多種繼承方式

相關推薦