詳解JS中的對象字面量

前言

在 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__進行編碼很簡單,我一直喜歡簡單明瞭的解決方案。

說點脫離主題。 我覺得奇怪的是,簡單靈活的解決方案需要大量的工作和設計。如果解決方案很簡單,你可能會認為設計起來很容易。但是反之亦然:

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

如果某些東西看起來太復雜或難以使用,則可能還需要進一步的完善。

1.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__’創建一個擁有的屬性

2.簡寫方法定義

可以使用較短的語法在對象常量中聲明方法,以省略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存在清楚地表明繼承的屬性將被使用。

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]使用迭代器並返回自有的屬性的列表

5.剩餘和展開屬性

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

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

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 4、5和6支持此功能。

現在方法聲明的形式更短,因此不必輸入function關鍵字。 在簡化方法中,可以使用super關 鍵字,該關鍵字可以輕松訪問對象原型鏈中的繼承屬性。

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

以上就是詳解JS中的對象字面量的詳細內容,更多關於JS對象字面量的資料請關註WalkonNet其它相關文章!

推薦閱讀: