## 一、簡潔屬性和方法   當創建對象字面量時，如果屬性值是與屬性同名的已定義的標識符（例如變量、常量等），那么ES6允許省略冒號和屬性值，這樣就能避免冗余的初始化。下面分別用傳統的鍵值對和最新的簡寫方式創建對象字面量，可以明顯的看出，第二種書寫起來更加精煉。 ~~~ let name = "strick", age = 28, obj; //鍵值對的寫法 obj = { name: name, age: age }; //只有屬性名的簡潔寫法 obj = { name, age }; ~~~   屬性上的方法也可以用更加簡潔、直觀的語法來表達。如下代碼所示，聲明getName()時使用了傳統的方式，而聲明getAge()時，使用了省略冒號和function關鍵字的簡潔方式。 ~~~ obj = { getName: function() { //傳統方式 return name; }, getAge() { 　　//簡潔方式 return age; } }; ~~~   注意，簡寫的方法不支持遞歸調用，并且只有簡寫的方法才能支持super對象（將在下面的原型一節中介紹）。 ## 二、計算屬性名   對象字面量中的屬性名可以用標識符或字符串字面量表示，不僅如此，ES6還允許屬性名是要計算的表達式，但需要用方括號包裹，具體如下所示。 ~~~ obj = { name, 　　　　　 //標識符 "age": age, 　　 //字符串字面量 [name + "2"]: "freedom", //要計算的表達式 [name + "3"]() { return name; } }; ~~~   注意，當屬性名是表達式或字符串字面量時，無法使用前面的簡潔寫法，而用表達式定義的方法不受此限制。 ## 三、原型   在ES6標準的附錄B中收入了一個有爭議的非標準屬性\_\_proto\_\_，這是一個訪問器屬性，繼承自Object.prototype，用于讀寫對象的原型。雖然現代瀏覽器都實現了它，但畢竟是一個內部屬性并且其它運行環境對它不一定支持，因此不推薦使用。   為了能更靈活地操作對象的原型，ECMAScript標準為Object對象提供了兩個靜態方法，其中ES5引入了getPrototypeOf()方法獲取對象的原型，ES6引入了setPrototypeOf()方法修改對象的原型。此方法的第一個參數是待修改的對象，第二個參數是新原型（一個對象或null），具體使用如下所示。 ~~~ let chain = {}, proto; Object.setPrototypeOf(chain, { name: "freedom" }); proto = Object.getPrototypeOf(chain); console.log(proto === chain.__proto__); //true ~~~   上面代碼的最后一句做了一次全等比較，比較結果是true，說明運算符左右兩邊的操作數指向了同一個對象，這也證明了setPrototypeOf()和getPrototypeOf()兩個方法可以取代\_\_proto\_\_屬性。   ES6新增了super關鍵字，可指向當前對象的原型，相當于調用Object.getPrototypeOf()方法。注意，super關鍵字只能出現在簡潔方法中，并且必須以調用的方式出現，具體使用如下所示。 ~~~ let father = { getName() { console.log("father"); } }; let child = { getName() { super.getName(); console.log("child"); } }; Object.setPrototypeOf(child, father); child.getName(); //先輸出"father"，再輸出"child" ~~~   執行上面代碼中的super.getName()，相當于執行Object.getPrototypeOf(this).getName()或Object.getPrototypeOf(this).getName.call(this)。注意，當用super關鍵字調用原型上的方法時，this綁定的是當前對象，而不是原型所指向的對象。下面用代碼展示了3種方式調用原型上的getName()方法。 ~~~ father = { name: "father", getName() { console.log(this.name); } }; child = { name: "child", getName() { super.getName(); 　　　　　　　 //"child" Object.getPrototypeOf(this).getName(); 　　 //"father" Object.getPrototypeOf(this).getName.call(this); //"child" } }; Object.setPrototypeOf(child, father); child.getName(); ~~~ ***** > 原文出處： [博客園-ES6躬行記](https://www.cnblogs.com/strick/category/1372951.html) [知乎專欄-ES6躬行記](https://zhuanlan.zhihu.com/pwes6) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。 還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。