JavaScript 객체 리터럴이 멋지다고 말하는 이유는 무엇입니까?

ECMAScript 2015 이전에는 JavaScript의 객체 리터럴(객체 이니셜라이저라고도 함) 기능이 매우 약했습니다. 다음 두 가지 속성만 정의할 수 있습니다.

• 공통 키/값 쌍 { name1: value }

• Getters { get name(){..} } 및 setters { set name(val){..} }은 계산해야 하는 값을 설정하고 가져오는 데 사용됩니다.

안타깝게도 객체 리터럴의 모든 용도는 단 하나의 간단한 예에서 다룰 수 있습니다.

JS Bin에서 사용해 보세요

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

JavaScript는 프로토타입입니다. 언어 기반이므로 모든 것이 객체입니다. 언어는 객체 생성, 구조화 및 프로토타입 액세스와 관련하여 간단한 구조를 제공해야 합니다.

객체를 정의하고 프로토타입을 설정하는 것은 일반적인 작업입니다. 나는 항상 프로토타입 설정이 단일 구문을 사용하여 객체 리터럴로 직접 지원되어야 한다고 생각합니다.

안타깝게도 리터럴의 한계로 인해 직접적인 해결책이 없습니다. 객체 리터럴을 결합하고 프로토타입을 설정하려면 Object.create()를 사용해야 합니다.

JS Bin에서 사용해 보세요

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

제 생각에는 이것이 불편한 해결책입니다. 자바스크립트는 프로토타입을 기반으로 하는데, 프로토타입에서 객체를 생성하는 것이 왜 이렇게 번거롭나요?

다행히도 JavaScript는 변화하고 있습니다. 더욱 실망스러운 많은 문제는 JavaScript를 통해 단계별로 해결되고 있습니다.

이 기사에서는 ES2015가 위의 문제를 해결하고 추가 이점을 위해 객체 리터럴을 개선하는 방법을 설명합니다.

• 객체 생성 중 프로토타입 설정

• 약식 메서드 정의

• 상위 클래스 메서드 호출

• 계산된 속성 이름

In 그동안 최신 제안(2단계)인 객체 나머지 속성과 속성 확장 연산자를 살펴보겠습니다.

1. 객체 생성 중에 프로토타입 설정

이미 알고 있듯이 기존 객체의 프로토타입에 액세스하는 방법 중 하나는 getter 속성 __proto__:

JS Bin에서 시도

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

myObject.__proto__ myObject의 프로토타입 객체를 반환합니다.

좋은 소식은 ES2015에서는 객체 리터럴 { __proto__: protoObject }의 프로토타입을 설정하기 위해 리터럴 __proto__를 속성 이름으로 사용할 수 있다는 것입니다.

让我们用 __proto__ 重写一下上面那个例子，让它看起来好一点：

Try in JS Bin

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 对象使用原型 myProto 创建，这可以通过特殊属性 __proto__ 实现。

这个对象通过简单的语句创建，而不需要额外的函数例如 Object.create()。

如你所见，使用 __proto__ 是简单的。我偏爱简单直接的解决方案。

有点说跑题了，回到主题来。我认为获得简单和可靠的解决方案需要通过大量的设计和实践。如果一个解决方案是简单的，你可能认为它同样也很容易被设计出来，然而事实并不是这样：

• 让它变得简单明了的过程是复杂的

• 让它变得复杂和难以理解却很容易

如果某个东西看起来太复杂或者用起来不舒服，很可能它的设计者考虑不周。

元芳，你怎么看？（欢迎在文章底部发表评论参与讨论）

2.1 使用 __proto__ 的特例

尽管 __proto__ 看似简单，却有一些特殊的场景你需要格外注意。

在对象字面量中 __proto__ 只允许使用一次。多次使用的话 JavaScript 会抛出异常：

Try in JS Bin

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。

JavaScript 限制了只允许使用 object 或者 null 作为 __proto__ 属性的值。使用其它原生类型（如字符串、数值、布尔类型）或者 undefined 会被忽略，并不能改变对象的原型。

看一个例子：

Try in JS Bin

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

上面的例子里，对象字面量使用 undefined 和数值 15 来设置 __proto__ 值。因为只有对象或者 null 才允许被使用，objUndefined 和 objNumber 仍然是它们默认的原型：简单 JavaScript 对象 {}。__proto__ 的赋值被忽略了。

当然，尝试使用原生类型来设置对象的原型，这本身是很奇怪的。所以在这里做限制是符合预期的。

2. 速记方法定义

现在对象字面量中可以使用一个更短的语法来声明方法，省略 function 关键字和冒号。这被叫做速记方法定义（shorthand method definition）。

让我们用新的方式来定义一些方法：

Try in JS Bin

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

add() 和 get() 是 collection 中使用快捷的方式定义的方法。

一个很好的地方是这样声明的方法是具名的，这对于调试有帮助。执行 collection.add.name 将返回函数名称 'add'。

3. 调用父类方法

一个有趣的改进是能够使用 super 关键字来访问从原型链继承下来的属性。看下面的例子：

Try in JS Bin

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

calc 是 numbers 对象的属性。在 numbers 的方法 sumElements 里面，要调用原型 calc上的方法，可以使用 super 关键字： super.sumArray()。

所以 super 是从原型链访问被继承的属性的一个快捷的方法。

在上一个例子里，我们也可以直接调用 cale.sumArray()，不过 super 是一个更好的选择因为它访问对象的原型链。它的存在清晰地暗示了继承的属性将被使用。

3.1 使用 super 的限制

在对象字面量中， super 只能用在速记方法定义中。

如果在普通的方法声明 { name: function() {} } 中使用它，JavaScript 会抛异常：

Try in JS Bin

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

上面的代码里，方法 sumElements 被定义为：sumElements:function(){...}。由于 super要求在速记方法中使用，在其中调用 super 将抛出异常：SyntaxError: 'super' keyword unexpected here。

这个限制不会对对象字面量声明有多少影响，因为大部分情况下我们没有理由不用速记方法定义，毕竟它语法更简单。

4. 计算属性名称

在 ES2015 之前，对象初始化器的属性名称是字面量，大多数情况下是静态字符串。要创建一个动态计算的属性名，你不得不使用属性访问器：

Try in JS Bin

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 }

当然，这种定义属性的方法差强人意。

计算属性名称能更优雅地解决这个问题。

当我们从表达式计算属性名称，将代码放在方括号之间 {[expression]: value}。这个表达式计算结果将成为属性名。

我真的很喜欢这个语法：短而简单。

让我们改进上面的代码：

Try in JS Bin

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 作为属性名

Symbols 也可以被用来计算属性名称，只需要将它包含在方括号中：{ [Symbol('name')]: 'Prop value' }。

例如，使用特殊属性 Symbol.iterator 来迭代遍历一个对象的自有属性名，代码如下：

Try in JS Bin

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. 展望未来：rest 和属性展开

对象字面量的 Rest 和属性展开 是新的标准草案中的一个提案（stage 2），意味着这一特性是新版本 JavaScript 的规范的候选。

数组的 展开和 rest 操作符 已经被实现了。

Rest 属性 允许我们从解构赋值左侧使用对象来收集属性，看下面的例子：

Try in JS Bin

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

属性展开 允许将源对象的自有属性拷进对象字面量内部。在上面的例子中，对象字面量从 souce对象中收集额外的属性。

Try in JS Bin

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

6. 结论

JavaScript 在快速进步。

即使是相对小的结构比如对象字面量在 ES2015 中都有相当大的改进，更别说还有一大堆新特性在草案中。

你可以从初始化器中使用 __proto__ 属性直接设置对象的原型，这比使用 Object.create() 要更方便。

方法声明可以写成更简短的形式，这样你就不用写 function 关键字了。然后在速记方法中可以使用 super 关键字，它能提供方便的对被继承原型链上属性的访问。

如果一个属性名在运行时计算，现在你可以使用计算属性名称 [表达式] 来初始化对象。

的确，对象字面量现在很酷！

你觉得呢？欢迎在下方发表评论参与讨论。

以上就是为什么我要说 JavaScript 对象字面量很酷的内容，更多相关内容请关注PHP中文网（www.php.cn）！