[TOC] >[success] # ES6 和 ES5 的類寫法比較 >[info] ## 比較 兩者最基本寫法 >[danger] ##### es5 -- 類的寫法 ~~~ function PersonType(name) { this.name = name } PersonType.prototype.sayName=function () { console.log(this.name) } var personType= new PersonType('wang') personType.sayName() // wang // instanceof 判斷的是是否在原型鏈上 // 所以很好的說明 萬物都來自Object console.log(personType instanceof PersonType) // true console.log(personType instanceof Object) // true ~~~ >[danger] ##### es6 的寫法 -- class ~~~ 1.書中的給的建議是:自有屬性是實例中的屬性，不會出現在原型上，且只能在類的構造函數活方法中創建， 建議在構造函數中創建所有的自有屬性，從而只通過一處就可以控制類中的所有自有屬性。下面案例中name 就是一個自有屬性 ~~~ ~~~ class PersonClass{ // 等價于es5寫法的PersonType 構造函數 constructor(name){ this.name = name } // 等價于es5 的PersonType.prototype.sayName sayName(){ console.log(this.name) } } let personType= new PersonClass('wang') personType.sayName() // wnag console.log(personType instanceof PersonClass) // true console.log(personType instanceof Object) // true // 證明了 class 只是一個語法糖 console.log(typeof PersonClass) // function ~~~ >[info] ## es6 和 es5 的類其他的不同 ~~~ 1.函數聲明可以被提升，而類聲明與let聲明類似，不能被提升；真正執行聲明語句之前，它們會一直存在 于臨時死區中； 2.類聲明中的所有代碼將自動運行在嚴格模式中，而且無法強行讓代碼脫離嚴格模式執行； 3.在自定義類型中，需要通過Object.defineProperty()方法手工指定某個方法為不可枚舉； 而在類中，所有方法都是不可枚舉的；并且如果用es6形式簡寫function 則掛在在原型鏈上，否者掛在實列上 4.每個類都有一個名為'[[Construct]]'的內部方法，通過關鍵字new調用那些不含'[[Construct]]'的方法會導致程 序拋出錯誤； 5.使用除關鍵字new以外的方式調用類的構造函數會導致程序拋出錯誤； 6.在類中修改類名會導致程序報錯。 ~~~ >[danger] ##### 對第三條解釋 ~~~ function PersonType(name) { this.name = name } PersonType.prototype.sayName=function () { console.log(this.name) } var personType= new PersonType('wang') for(item in personType){ console.log(item,1) } 打印結果： name1 sayName 1 // -----------------ES6 分割線---------------------- class PersonClass{ // 等價于es5寫法的PersonType 構造函數 constructor(name){ this.name = name } // 等價于es5寫法的PersonType 構造函數 age = 10 // 等價于es5寫法的PersonType 構造函數 getAge=function(){} // 等價于es5 的PersonType.prototype.sayName sayName(){ console.log(this.name) } } let per= new PersonClass('wang') for(item in per){ console.log(item) } 打印結果： age getAge name ~~~ >[danger] ##### 解釋第六條 ~~~ class Foo{ constructor(){ Foo = "bar"; // 執行時會拋出錯誤 } } // 但在類聲明結束后就可以修改 Foo = "bar" ~~~ >[danger] ##### 利用上面六點 寫一個es5符合的情況 ~~~ // 直接等價于 PersonClass let PersonType2 = (function() { "use strict"; const PersonType2 = function(name) { // 確認函數被調用時使用了 new if (typeof new.target === "undefined") { throw new Error("Constructor must be called with new."); } this.name = name; } Object.defineProperty(PersonType2.prototype, "sayName", { value: function() { // 確認函數被調用時沒有使用 new if (typeof new.target !== "undefined") { throw new Error("Method cannot be called with new."); } console.log(this.name); }, enumerable: false, writable: true, configurable: true }); return PersonType2; }()); // ----- 使用---- const a = new PersonType2('wang') console.log(a.name) // wang ~~~ >[info] ## es6 和es5 的訪問器屬性寫法 >[danger] ##### es5 仿照es6實現寫法 ~~~ let CustomHTMLElement = (function() { "use strict"; const CustomHTMLElement = function(element) { // 確認函數被調用時使用了 new if (typeof new.target === "undefined") { throw new Error("Constructor must be called with new."); } this.element = element; } Object.defineProperty(CustomHTMLElement.prototype, "html", { enumerable: false, configurable: true, get: function() { return this.element.innerHTML; }, set: function(value) { this.element.innerHTML = value; } }); return CustomHTMLElement; }()); ~~~ >[danger] ##### es6 的寫法 ~~~ class CustomHTMLElement { constructor(element) { this.element = element; } get html() { return this.element.innerHTML; } set html(value) { this.element.innerHTML = value; } } var descriptor = Object.getOwnPropertyDescriptor(CustomHTMLElement.prototype, "html"); console.log("get" in descriptor); // true console.log("set" in descriptor); // true console.log(descriptor.enumerable); // false ~~~