ES5和ES6的繼承

es5繼承

建構函式、原型和例項的關係：每乙個建構函式都有乙個原型物件，每乙個原型物件都有乙個指向建構函式的指標，而每乙個例項都包含乙個指向原型物件的內部指標，

1       function supertype()
4       supertype.prototype.getsupervalue = function();
7       function subtype()
10       \\繼承了supertype
11       subtype.prototype = new supertype();
12       
13       subtype.prototype.getsubvalue = function();
16       var instance = new subtype();
17       alert(instance.getsupervalue());  \\true

原型鏈繼承的問題

1 function supertype(name)
4 5 function subtype()
9 10 var instance = new subtype;
11 console.log(instance.name);  \\annika
12 console.log(instance.age);   \\29

缺點：組合繼承原型式繼承寄生式繼承

寄生組合式繼承

es5的繼承可以用下圖來概括：

es6繼承

es6的繼承主要要注意的是class的繼承。

1 class colorpoint extends point 
6     tostring()
10 }

子類必須在constructor方法中呼叫super方法，否則新建例項時會報錯。這是因為子類沒有自己的this物件，而是繼承父類的this物件，然後對其進行加工，如果不呼叫super方法，子類就得不到this物件。因此，只有呼叫super之後，才可以使用this關鍵字。

乙個繼承語句同時存在兩條繼承鏈：一條實現屬性繼承，一條實現方法的繼承

1 class a extends b{}
2 a.__proto__ === b;  //繼承屬性
3 a.prototype.__proto__ == b.prototype;//繼承方法

es6的繼承可以用下圖來概括：

ES5和ES6的繼承

在es6之前，js的函式和物件是混在一起的，通過new呼叫函式，就是把函式當作物件，建立例項。funciton person name,age person.prototype.getname function person.prototype.setname function name var p...

ES5和ES6的繼承

建構函式 function obj uname,age 建立例項物件 var test newobj uname 18 使用方法 test.method obj.boy 建構函式名字的首字母要大寫，且與new一起使用建構函式中的屬性方法被叫做成員。其中 1 靜態成員在建構函式本身上新增的成員，如...

es5繼承與es6繼承

es5中的繼承方式 1.原型鏈繼承缺點 1.建立例項時無法像父類建構函式傳遞引數 2.因為指定了原型，所以不能實現多繼承 3.父類建構函式上的屬性被所有子類共用，給原型上的屬性賦值會改變其他子類的屬性值 es5 const parent function name,age parent.proto...

ES5和ES6的繼承

ES5和ES6的繼承

ES5和ES6的繼承

es5繼承與es6繼承

相關推薦