學習ECMAScript 2015【3】Enhanced Object Literals

0. 講在前面

對象字面量擴展語法，其實更多的是書寫的便捷。

1.總覽示例

var obj = {
    // Sets the prototype. "__proto__" or '__proto__' would also work.
    __proto__: theProtoObj,
    // Computed property name does not set prototype or trigger early error for
    // duplicate __proto__ properties.
    ['__proto__']: somethingElse,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ "prop_" + (() => 42)() ]: 42
};

2.展開聊聊

2.1.支持proto注入

這個東西怎麼說呢，有爭議，在MDN Web Docs中Object.prototype.proto有這樣的句子：

已廢棄: 該特性已經從 Web 標準中刪除，雖然一些瀏覽器目前仍然支持它，但也許會在未來的某個時間停止支持，請儘量不要使用該特性。

__proto__屬性已在ECMAScript 6語言規範中標準化，用於確保Web瀏覽器的兼容性，因此它未來將被支持。它已被不推薦使用, 現在更推薦使用Object.getPrototypeOf/Reflect.getPrototypeOf 和Object.setPrototypeOf/Reflect.setPrototypeOf（儘管如此，設置對象的[[Prototype]]是一個緩慢的操作，如果性能是一個問題，應該避免）。

雖然但是……這玩意兒我看到不少人在用，用得不亦樂乎。反正，儘量吧，儘量用官方推薦的方式。

2.2.函數類屬性的省略語法

const obj = {
    //Before
    foo: function(){
        return 'foo';
    },

    //After
    bar(){
        return 'bar';
    }
}

在Vue裏，我們基本上在methods中都是用新的方式來寫了。

2.3.可動態計算的屬性名

用表達式來表示屬性，雖然增強了動態性，還是建議大家在合適的場景中使用，別濫用。

const prefix = 'ES6';
const obj = {
    [prefix + 'computedProperty']: 'henry'
}

其思想類似於Vue中的computed，都是希望變量能和其他部分聯動，不再使用手動的方式來管理。其實這種感覺在編程世界中很常見，從我們編寫windows窗口應用中監聽事件開始，我們就開始體會這種有關聯性的好處。其實在硬件編程中，也有類似的聯動的設定，幫助我們快速進行響應，就像人的下意識自動的動作一樣。

2.4.屬性名定義簡寫

const foo = 'world';
const bar = (s) => s+ foo;

const obj = {
    foo,
    bar
}

3. 總結

新的語法確實便捷了敲代碼，省去了不少重複代碼。大家使用新的特性也不要怕，有Babel保護你，幫你兼容所有時代的瀏覽器。