es6新增關鍵字class，代表類，其實相當於代替了es5的構造函數
通過構造函數可以創建一個對象實例，那么通過class也可以創建一個對象實列
/* es5 創建一個person 構造函數 */ function person (name,age) { this.name = name this.age = age } /* 定義原型鏈上的方法sayholle */ /* 為什么要將方法定義在原型上，定義在原型上的方法，所有的實例對象都共享 不會出現沒實列一個對象都重新創建一個這個方法 */ person.prototype.sayholle = function () { console.log(this.name+' holle'+ this.age) } let person1 = new person('czcz','23') person1.sayholle() // czcz holle23 /* es6 使用class創建一個對象 */ class personclass { /* 實列對象時默認調用的方法 */ constructor (name,age) { this.name = name this.age = age } /* 定義一個方法，相對構造上述原型鏈上的方法 */ sayholle () { console.log(this.name+' holle'+ this.age) } } let person2 = new personclass('czcz','26') person2.sayholle() // czcz holle23
es5中繼承的方式
1原型鏈繼承
/* es5原型鏈繼承 */ function person (name,age) { this.name = name this.age = age } person.prototype.sayholle = function () { console.log(this.name+' holle'+ this.age) } function child (sex) { this.sex = sex; } child.prototype = new person(); child.prototype.hh = 'ddd' let p = new child('man') console.log(p) // console.log(new person()); let p2 = new child('man') p2.__proto__.age = '36' /* 給p2原型上的age賦值，則導致p上的age也改變，父類構造函數上的屬性被所有子類共享 */ console.log(p) // 36 /* 缺點，child 新增的屬性只能在new person 以后，創建實列時無法向 父類的構造函數傳送參數，因為直接是指定了原型，所有也不能實現多繼承 父類構造函數上的屬性被所有子類共享 */
2.構造函數繼承
/* es5構造函數繼承 */ function person (name,age) { this.name = name this.age = age } person.prototype.sayholle = function () { console.log(this.name+' holle'+ this.age) } function child (sex,name,age) { this.sex = sex person.call(this,name,age) } let p = new child('man','czklove','13') console.log(p); /* 可以是先多繼承，只要執行多個call 創建實列時能像父類構造函數船體參數 不會出現父類屬性，所有子類構造函數共享 缺點， 不能繼承父類原型鏈上的方法，如上面不能掉用sayholle方法 子類構造函數的實列，原型鏈上並不存在父類構造函數， 因為不能繼承父類原型鏈上的函數，所有要繼承函數只能定義在父類構造函數上， 不能達到函數復用 */
3.組合繼承，融合了上面兩種方式
/* es5組合繼承 */ function person (name,age) { this.name = name this.age = age } person.prototype.sayholle = function () { console.log(this.name+' holle'+ this.age) } function child (sex,name,age) { this.sex = sex person.call(this,name,age) } child.prototype = new person(); /* 重新設置一下constructor 不設置也沒有影響，嚴謹的角度上來說還是設置一下*/ /* 不設置的話，__proto__ 上時沒有 constructor */ /* 正常來講constructor是指向自身的 */ child.prototype.constructor = child; let p = new child('man','czklove','13') let p1 = new child('man','czklove1','16') p.sayholle(); // czklove holle13 console.log(p);
/*
組合繼承，既能達到對父類屬性的繼承，也能繼承父類原型上的方法
父類屬性繼承也不會在所有子類的實列上共享
唯一缺點，子類原型上有父類構造函數的屬性，也就是多了一份屬性
*/
console.log(p.__proto__ === child.prototype) //true
4.優化版的組合繼承（寄生組合繼承）
/* es5寄生組合繼承 */ function person (name,age) { this.name = name this.age = age } person.prototype.sayholle = function () { console.log(this.name+' holle'+ this.age) } function child (sex,name,age) { this.sex = sex person.call(this,name,age) } child.prototype = Object.create(person.prototype); child.prototype.constructor = child let p = new child('man','czklove','13') p.sayholle(); // czklove holle13 console.log(p); /* child {sex: "man", name: "czklove", age: "13"} age: "13" name: "czklove" sex: "man" __proto__: person constructor: ƒ child(sex,name,age) __proto__: sayholle: ƒ () constructor: ƒ person(name,age) __proto__: Object */
es6 class
1.1class 內部都是嚴格模式
1.2class 不存在變量提升
1.3 class 的 name屬性
1.4 實現symbol.iterator 接口，可以使用for of 遍歷屬性
1.5this 指向實例內部
關於class的基本介紹，去阮一峰老師的es6入門看就行 http://es6.ruanyifeng.com/#docs/class
es6 class的繼承
/* esl class */ class person { constructor (name,age) { this.name = name this.age = age } syaholle () { console.log(this.name+ ' holle '+this.age) } } class child extends person { constructor (name,age,sex) { /* 執行父類的構造函數 子類必須在構造函數中掉用super */ super(name,age) /* 使用this一定要在super 之后 */ this.sex = sex } } let p = new child('czklove','23','man') console.log(p) /* child {name: "czklove", age: "23", sex: "man"} age: "23" name: "czklove" sex: "man" __proto__: person constructor: class child __proto__: constructor: class person syaholle: ƒ syaholle() __proto__: Object */
/* esl class */ class person { constructor (name,age) { this.name = name this.age = age } syaholle () { console.log(this.name+ ' holle '+this.age) } } class child extends person { constructor (name,age,sex) { /* 執行父類的構造函數 子類必須在構造函數中掉用super */ super(name,age) /* 使用this一定要在super 之后 */ this.sex = sex } } let p = new child('czklove','23','man') console.log(p) /* child {name: "czklove", age: "23", sex: "man"} age: "23" name: "czklove" sex: "man" __proto__: person constructor: class child __proto__: constructor: class person syaholle: ƒ syaholle() __proto__: Object */
es6 class 還涉及到很多東西，
1.靜態方法
2.this指向
3.super 關鍵字的具體使用
4.類的prototype屬性，構造函數的__proto__
5.原生構造函數的繼承，如Array的繼承，Boolean,Number,String Date...
基礎簡單的這里就不說了
我們再看以下原生構造函數的繼承
es5中是不允許原生構造函數的繼承的
/* es5為什么不能對原生構造函數的繼承 通過es5繼承我們知道，繼承父類構造屬性是通過person.call(this,argument) (es6) 是因為子類無法獲得原生構造函數的內部屬性， 通過Array.apply()或者分配給原型對象都不行。 原生構造函數會忽略apply方法傳入的this，也就是說， 原生構造函數的this無法綁定，導致拿不到內部屬性 */ /* es6 使用class繼承原生 */ class myarray extends Array { constructor(...argus) { super(...argus) } } let arrays = new myarray(); arrays[0] = 'czklove'; console.log(arrays); arrays.length = 0 console.log(arrays); /* 輸出 myarray ["czklove"] myarray [] */
注，es6對object構造函數的繼承，不能傳參，傳參數無效
class newobjext extends Object { constructor() { super(...arguments) } } let o = new newobjext({name: 'czklove'}) console.log(o.name); // undefined
總結，
es5的繼承
1.1原型鏈繼承
1.2 構造函數繼承
1.3組合繼承
1.4寄生組合繼承
es6 的 extends 繼承
super 關鍵字的使用，新增的靜態字段使用，支持對原生構造函數的繼承，對object繼承的差異