爲何 JS 中的對象字面量很酷

做者：Dmitri Pavlutin
譯者：前端小智
來源：dmitripavlutin

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

在 ES6 以前，JS 中的對象字面量(也稱爲對象初始化器)是很是基礎的。能夠定義兩種類型的屬性：

• 鍵值對 {name1: value1}
• 獲取器 { get name(){..} } 和 設置器 { set name(val){..}} 的計算屬性值

var myObject = {
  myString: 'value 1',
  get myNumber() {
    return this._myNumber;
  },
  set myNumber(value) {
    this._myNumber = Number(value);
  },
};
myObject.myString; // => 'value 1'
myObject.myNumber = '15';
myObject.myNumber; // => 15

JS 是一種基於原型的語言，所以一切都是對象。 在對象建立，配置和訪問原型時，必須提供一種易於構造的語言。

定義一個對象並設置它的原型是一個常見的任務。最好的方式是直接在對象字面量使用一條語句來設置原型。

不幸的是，字面量的侷限性不容許用一個簡單的解決方案來實現這一點。必須結合使用object.create() 和對象字面量來設置原型。

var myProto = {
  propertyExists: function(name) {
    return name in this;
  }
};

var myNumbers = Object.create(myProto);
myNumbers['arrat'] = [1, 6, 7];
myNumbers.propertyExists('array'); // => true
myNumbers.propertyExists('collection'); // => false

我認爲這種解決方案不夠靈活。JS 是基於原型的，爲何要用原型建立對象那麼麻煩？

幸運的是，JS 也在慢慢完善。JS 中不少使人沮喪的問題都是逐步解決的。

本文演示了 ES 6 如何解決上述問題，並使用額外的功能改進對象字面量。

• 在對象構造上設置原型
• 方法的聲明
• super 調用
• 計算屬性名

1. 在對象構造上設置原型

如你所知，訪問現有對象原型的一種方法是使用 getter 屬性 __proto__：

var myObject = {
  name: 'Hello World!',
};
myObject.__proto__; // => {}
myObject.__proto__.isPrototypeOf(myObject); // => true

myObject.__ proto__ 返回 myObject 的原型對象。

請注意，不建議將 object.__ proto__ 用做 getter/setter。替代方法應考慮使用Object.getPrototypeOf() 和 Object.setPrototypeOf()。

ES6容許使用__proto__做爲屬性名，並在 {__proto__：protoObject}中設置原型。

接着，我們使用 __proto__ 屬性進行對象初始化，並優化上面的代碼：

var myProto = {
  propertyExists: function(name) {
    return name in this;
  },
};
var myNumbers = {
  __proto__: myProto,
  array: [1, 6, 7],
};
myNumbers.propertyExists('array'); // => true
myNumbers.propertyExists('collection'); // => false

myNumbers 對象是使用特殊屬性名 proto 與建立原型 myProto，此次我們使用一條語句就建立，沒有像上面還須要 object.create() 這樣的附加函數。

如你所看，使用 __proto__ 進行編碼很簡單，我一直喜歡簡單明瞭的解決方案。

說點脫離主題。 我以爲奇怪的是，簡單靈活的解決方案須要大量的工做和設計。若是解決方案很簡單，你可能會認爲設計起來很容易。可是反之亦然：

• 要使它簡單明瞭是很複雜的
• 把它變得複雜和難以理解是很容易的

若是某些東西看起來太複雜或難以使用，則可能還須要進一步的完善。

你對簡單性有何見解？ （請在下面隨意寫評論）

2.1 __proto__用法的特殊狀況

即便__proto__看起來很簡單，您也應該注意一些特殊狀況。

在對象字面量中只能使用__proto__一次，不然 JS 會報錯：

var object = {
  __proto__: {
    toString: function() {
      return '[object Numbers]'
    }
  },
  numbers: [1, 5, 89],
  __proto__: {
    toString: function() {
      return '[object ArrayOfNumbers]'
    }
  }
};

上面示例中的對象字面量中使用兩次__proto__屬性，這是不容許的。在這種狀況下，將在會拋出錯誤： SyntaxError: Duplicate __proto__ fields are not allowed in object literals 。

JS 約束只能用一個對象或 null 做爲 __proto__ 屬性的值。 任何使用原始類型（字符串，數字，布爾值）或 undefined 類型都將被忽略，而且不會更改對象的原型。

var objUndefined = {
  __proto__: undefined,
};
Object.getPrototypeOf(objUndefined); // => {}
var objNumber = {
  __proto__: 15,
};
Object.getPrototypeOf(objNumber); // => {}

對象字面量使用 undefined 和 數字 15 來設置 __proto__ 值。 由於僅容許將對象或 null 用做原型，因此__proto__值將被忽略，但 objUndefined 和 objNumber 仍具備其默認原型：純 JS 對象 {}, 。

固然，嘗試使用基本類型來設置對象的原型也會很奇怪。

當對象字面具備計算結果爲'__proto__'的字符串時 {['__proto__']：protoObj }，也要當心。 以這種方式建立的屬性不會更改對象的原型，而只是使用鍵 '__proto__' 建立一個擁有的屬性

簡寫方法定義

可使用較短的語法在對象常量中聲明方法，以省略 function 關鍵字和 ： 冒號的方式。 這被稱爲簡寫方法定義。

接着，我們使用簡寫的方法來定義一些方法：

var collection = {
  items: [],
  add(item) {
    this.items.push(item);
  },
  get(index) {
    return this.items[index];
  },
};
collection.add(15);
collection.add(3);
collection.get(0); // => 15

一個很好的好處是，以這種方式聲明的方法被命名爲函數，這對於調試目的頗有用。 從上面示例中執行 collection.add.name 會返回函數名稱 「add」。

3. super 的使用

JS 一個有趣的改進是使用 super 關鍵字做爲從原型鏈訪問繼承的屬性的能力。 看下面的例子：

var calc = {
  numbers: null,
  sumElements() {
    return this.numbers.reduce(function(a, b) {
      return a + b;
    });
  },
};
var numbers = {
  __proto__: calc,
  numbers: [4, 6, 7],
  sumElements() {
    if (this.numbers == null || this.numbers.length === 0) {
      return 0;
    }
    return super.sumElements();
  },
};
numbers.sumElements(); // => 17

calc 是 numbers 對象的原型。 在 numbers 的 sumElements方法中，可使用 super關鍵字從原型訪問方法：super.sumElements()

最終，super 是從對象原型鏈訪問繼承的屬性的快捷方式。

在前面的示例中，能夠嘗試直接執行 calc.sumElements() 來調用原型，會報錯。 然而，super.sumElements() 能夠正確調用，由於它訪問對象的原型鏈。並確保原型中的 sumElements() 方法使用 this.numbers 正確訪問數組。

super 存在清楚地代表繼承的屬性將被使用。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

我和阿里雲合做服務器，折扣價比較便宜：89/年，223/3年，比學生9.9每個月還便宜，買了搭建個項目，熟悉技術棧比較香（老用戶用家人帳號買就行了，我用我媽的)推薦買三年的划算點，點擊本條就能夠查看。

3.1 super 使用限制

super 只能在對象字面量的簡寫方法定義內使用。

若是試圖從普通方法聲明{ name: function(){} } 訪問它，JS 將拋出一個錯誤:

var calc = {
  numbers: null,
  sumElements() {
    return this.numbers.reduce(function(a, b) {
      return a + b;
    });
  },
};
var numbers = {
  __proto__: calc,
  numbers: [4, 6, 7],
  sumElements: function() {
    if (this.numbers == null || this.numbers.length === 0) {
      return 0;
    }
    return super.sumElements();
  },
};
// Throws SyntaxError: 'super' keyword unexpected here
numbers.sumElements();

方法 sumElements 被定義爲一個屬性: sumElements: function(){…}。由於super 只能在簡寫方法中使用，因此在這種狀況下調用它會拋出 SyntaxError: 'super' keyword unexpected here。

此限制在很大程度上不影響對象字面量的聲明方式。 因爲語法較短，所以一般最好使用簡寫方法定義。

4.計算屬性名

在 ES6 以前，對象初始化使用的是字面量的形式，一般是靜態字符串。 要建立具備計算名稱的屬性，就必須使用屬性訪問器。

function prefix(prefStr, name) {
  return prefStr + '_' + name;
}
var object = {};
object[prefix('number', 'pi')] = 3.14;
object[prefix('bool', 'false')] = false;
object; // => { number_pi: 3.14, bool_false: false }

固然，這種定義屬性的方式是使人愉快的。

接着使用簡寫方式來改完上面的例子：

function prefix(prefStr, name) {
  return prefStr + '_' + name;
}
var object = {
  [prefix('number', 'pi')]: 3.14,
  [prefix('bool', 'false')]: false,
};
object; // => { number_pi: 3.14, bool_false: false }

[prefix（'number'，'pi'）]經過計算 prefix('number', 'pi') 表達式（即'number_pi'）來設置屬性名稱。

相應地，[prefix('bool', 'false')] 將第二個屬性名稱設置爲'bool_false'。

4.1 symbol 做爲屬性名稱

symbol 也能夠用做計算的屬性名稱。 只要確保將它們包括在方括號中便可：{[Symbol（'name'）]：'Prop value'}

例如，用特殊屬性 Symbol.iterator 並迭代對象自身的屬性名稱。 以下示例所示：

var object = {
   number1: 14,
   number2: 15,
   string1: 'hello',
   string2: 'world',
   [Symbol.iterator]: function *() {
     var own = Object.getOwnPropertyNames(this),
       prop;
     while(prop = own.pop()) {
       yield prop;
     }
   }
}
[...object]; // => ['number1', 'number2', 'string1', 'string2']

[Symbol.iterator]: function *() { } 定義一個屬性，該屬性用於迭代對象的自有屬性。 展開運算符 [... object] 使用迭代器並返回自有的屬性的列表

剩餘和展開屬性

剩餘屬性容許從對象中收集在分配銷燬後剩下的屬性。

下面的示例在解構對象以後收集剩餘的屬性：

var object = {
  propA: 1,
  propB: 2,
  propC: 3,
};
let { propA, ...restObject } = object;
propA; // => 1
restObject; // => { propB: 2, propC: 3 }

展開屬性容許將源對象的自有屬性複製到對象文字面量中。 在此示例中，對象字面量從源對象收集到對象的其餘屬性：

var source = {
  propB: 2,
  propC: 3,
};
var object = {
  propA: 1,
  ...source,
};
object; // => { propA: 1, propB: 2, propC: 3 }

6.總結

在 ES6 中，即便是做爲對象字面量的相對較小的結構也獲得了至關大的改進。

可使用__proto__ 屬性名稱直接從初始化器設置對象的原型。 這比使用 Object.create() 更容易。

請注意，__proto__ 是 ES6 標準附件B的一部分，不鼓勵使用。 該附件實現對於瀏覽器是必需的，但對於其餘環境是可選的。NodeJS 四、5和6支持此功能。

如今方法聲明的形式更短，所以沒必要輸入 function 關鍵字。 在簡化方法中，可使用 super關 鍵字，該關鍵字能夠輕鬆訪問對象原型鏈中的繼承屬性。

若是屬性名稱是在運行時計算的，那麼如今您可使用計算的屬性名稱[expression]來初始化對象。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://dmitripavlutin.com/wh...

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。

·