ES6躬行記（5）——對象字面量的擴展

1、簡潔屬性和方法

　　當建立對象字面量時，若是屬性值是與屬性同名的已定義的標識符（例如變量、常量等），那麼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對象（將在下面的原型一節中介紹）。

2、計算屬性名

　　對象字面量中的屬性名能夠用標識符或字符串字面量表示，不只如此，ES6還容許屬性名是要計算的表達式，但須要用方括號包裹，具體以下所示。

obj = {
  name,                　　　　　　 //標識符
  "age": age,                　　　//字符串字面量
  [name + "2"]: "freedom",        //要計算的表達式
  [name + "3"]() {
    return name;
  }
};

　　注意，當屬性名是表達式或字符串字面量時，沒法使用前面的簡潔寫法，而用表達式定義的方法不受此限制。

3、原型

　　在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();