为什么我要说 JavaScript 对象字面量很酷?

hubuke 8年前
   <p>在 <a href="/misc/goto?guid=4959677116482516485">ECMAScript 2015</a> 之前,JavaScript 里的对象字面量(也叫对象初始化器)功能很弱。它只能定义两种属性:</p>    <ul>     <li>普通键/值对 <code>{ name1: value }</code></li>     <li><a href="/misc/goto?guid=4959675890877349900">Getters</a> <code>{ get name(){..} }</code> 以及 <a href="/misc/goto?guid=4959675890963404430">setters</a> <code>{ set name(val){..} }</code>,用来设置和获取需要计算的值。</li>    </ul>    <p>令人心痛地,对象字面量的所有用法只用一个简单的例子就能囊括:</p>    <p><a href="/misc/goto?guid=4959675891045043242">Try in JS Bin</a></p>    <pre>  <code class="language-javascript">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</code></pre>    <p>JavaScript 是一个<a href="/misc/goto?guid=4959675891137452906">基于原型的语言</a>,因此一切皆是对象。当涉及到对象创建、结构和访问原型时,语言必须提供简单的结构。</p>    <p>定义一个对象并设置它的原型是一个常见的任务。我总觉得设置原型应该被对象字面量直接支持,使用单一的语法。</p>    <p>不幸地是,字面量的局限性使得它没有直接的解决方案。你不得不使用 <code>Object.create()</code> 来结合对象字面量和设置原型:</p>    <p><a href="/misc/goto?guid=4959675891247235882">Try in JS Bin</a></p>    <pre>  <code class="language-javascript">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</code></pre>    <p>在我看来,这是一个不舒服的解决方案。JavaScript 是基于原型的,为什么从原型创建一个对象那么麻烦?</p>    <p>幸运地是,JavaScript 在改变。比较令人沮丧的许多问题在 JavaScript 中正在被一步一步地解决。</p>    <p>这篇文章解释 ES2015 是如何解决上面所说的问题以及改进对象字面量以获得额外的好处:</p>    <ul>     <li>在对象构造的过程中设置原型</li>     <li>速记方法定义</li>     <li>调用父类方法</li>     <li>计算属性名称</li>    </ul>    <p>同时,让我们展望未来,了解最新的提案(<a href="/misc/goto?guid=4959675891333162578">stage 2</a>):对象的 rest 属性和属性展开操作符。</p>    <p><img alt="为什么我要说 JavaScript 对象字面量很酷? " src="https://simg.open-open.com/show/cbc4c54d3efca8bf4a3e0e66bef4c9cd.jpg" width="600" height="600"></p>    <h3>1. 在对象构造时设置原型</h3>    <p>如你已经知道得,其中一个访问一个已存在对象的原型的方法是使用 getter 属性 <code>__proto__</code>:</p>    <p><a href="/misc/goto?guid=4959675891409109579">Try in JS Bin</a></p>    <pre>  <code class="language-javascript">var myObject = {      name: 'Hello World!'  };  myObject.__proto__;                         // => {}    myObject.__proto__.isPrototypeOf(myObject); // => true</code></pre>    <p><code>myObject.__proto__</code> 返回 <code>myObject</code> 的原型对象。</p>    <p>好消息是 <a href="/misc/goto?guid=4959675891496892409">ES2015 允许使用</a> 字面量 <code>__proto__</code> 作为属性名来设置对象字面量的原型 <code>{ __proto__: protoObject }</code>。</p>    <p>让我们用 <code>__proto__</code> 重写一下上面那个例子,让它看起来好一点:</p>    <p><a href="/misc/goto?guid=4959675891577981237">Try in JS Bin</a></p>    <pre>  <code class="language-javascript">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</code></pre>    <p><code>myNumbers</code> 对象使用原型 <code>myProto</code> 创建,这可以通过特殊属性 <code>__proto__</code> 实现。</p>    <p>这个对象通过简单的语句创建,而不需要额外的函数例如 <code>Object.create()</code>。</p>    <p>如你所见,使用 <code>__proto__</code> 是简单的。我偏爱简单直接的解决方案。</p>    <p>有点说跑题了,回到主题来。我认为获得简单和可靠的解决方案需要通过大量的设计和实践。如果一个解决方案是简单的,你可能认为它同样也很容易被设计出来,然而事实并不是这样:</p>    <ul>     <li>让它变得简单明了的过程是复杂的</li>     <li>让它变得复杂和难以理解却很容易</li>    </ul>    <p>如果某个东西看起来太复杂或者用起来不舒服,很可能它的设计者考虑不周。</p>    <p>元芳,你怎么看?(欢迎在文章底部发表评论参与讨论)</p>    <p>2.1 使用 <code>__proto__</code> 的特例</p>    <p>尽管 <code>__proto__</code> 看似简单,却有一些特殊的场景你需要格外注意。</p>    <p><img alt="为什么我要说 JavaScript 对象字面量很酷? " src="https://simg.open-open.com/show/e1de81c3e560cafc730e6e9fb04c37f0.jpg" width="500" height="500"></p>    <p>在对象字面量中 <code>__proto__</code> <strong>只允许使用一次</strong>。多次使用的话 JavaScript 会抛出异常:</p>    <p><a href="/misc/goto?guid=4959675891660644174">Try in JS Bin</a></p>    <pre>  <code class="language-javascript">var object = {      __proto__: {      toString: function() {        return '[object Numbers]'      }    },    numbers: [1, 5, 89],    __proto__: {      toString: function() {        return '[object ArrayOfNumbers]'      }    }  };</code></pre>    <p>上面例子中的对象字面量使用了 <code>__proto__</code> 属性两次,这是不允许的。这种情况下,会抛出一个错误 <code>SyntaxError: Duplicate __proto__ fields are not allowed in object literals</code>。</p>    <p>JavaScript 限制了只允许使用 object 或者 <code>null</code> 作为 <code>__proto__</code> 属性的值。使用其它原生类型(如字符串、数值、布尔类型)或者 <code>undefined</code> 会被忽略,并不能改变对象的原型。</p>    <p>看一个例子:</p>    <p><a href="/misc/goto?guid=4959675891759835348">Try in JS Bin</a></p>    <pre>  <code class="language-javascript">var objUndefined = {      __proto__: undefined  };  Object.getPrototypeOf(objUndefined); // => {}    var objNumber = {      __proto__: 15  };  Object.getPrototypeOf(objNumber);    // => {}</code></pre>    <p>上面的例子里,对象字面量使用 <code>undefined</code> 和数值 <code>15</code> 来设置 <code>__proto__</code> 值。因为只有对象或者 <code>null</code> 才允许被使用,<code>objUndefined</code> 和 <code>objNumber</code> 仍然是它们默认的原型:简单 JavaScript 对象 <code>{}</code>。<code>__proto__</code> 的赋值被忽略了。</p>    <p>当然,尝试使用原生类型来设置对象的原型,这本身是很奇怪的。所以在这里做限制是符合预期的。</p>    <h3>2. 速记方法定义</h3>    <p>现在对象字面量中可以使用一个更短的语法来声明方法,省略 <code>function</code> 关键字和冒号。这被叫做速记方法定义(shorthand method definition)。</p>    <p>让我们用新的方式来定义一些方法:</p>    <p><a href="/misc/goto?guid=4959675891852324062">Try in JS Bin</a></p>    <pre>  <code class="language-javascript">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</code></pre>    <p><code>add()</code> 和 <code>get()</code> 是 <code>collection</code> 中使用快捷的方式定义的方法。</p>    <p>一个很好的地方是这样声明的方法是具名的,这对于调试有帮助。执行 <code>collection.add.name</code> 将返回函数名称 <code>'add'</code>。</p>    <h3>3. 调用父类方法</h3>    <p>一个有趣的改进是能够使用 <code>super</code> 关键字来访问从原型链继承下来的属性。看下面的例子:</p>    <p><a href="/misc/goto?guid=4959675891933816863">Try in JS Bin</a></p>    <pre>  <code class="language-javascript">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</code></pre>    <p><code>calc</code> 是 <code>numbers</code> 对象的属性。在 <code>numbers</code> 的方法 <code>sumElements</code> 里面,要调用原型 <code>calc</code> 上的方法,可以使用 <code>super</code> 关键字: <code>super.sumArray()</code>。</p>    <p>所以 <code>super</code> 是从原型链访问被继承的属性的一个快捷的方法。</p>    <p>在上一个例子里,我们也可以直接调用 <code>cale.sumArray()</code>,不过 <code>super</code> 是一个更好的选择因为它访问对象的原型链。它的存在清晰地暗示了继承的属性将被使用。</p>    <p>3.1 使用 <code>super</code> 的限制</p>    <p>在对象字面量中, <code>super</code> <strong>只能用在速记方法定义中</strong>。</p>    <p>如果在普通的方法声明 <code>{ name: function() {} }</code> 中使用它,JavaScript 会抛异常:</p>    <p><a href="/misc/goto?guid=4959675892017246421">Try in JS Bin</a></p>    <pre>  <code class="language-javascript">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();</code></pre>    <p>上面的代码里,方法 <code>sumElements</code> 被定义为:<code>sumElements:function(){...}</code>。由于 <code>super</code> 要求在速记方法中使用,在其中调用 <code>super</code> 将抛出异常:<code>SyntaxError: 'super' keyword unexpected here</code>。</p>    <p>这个限制不会对对象字面量声明有多少影响,因为大部分情况下我们没有理由不用速记方法定义,毕竟它语法更简单。</p>    <h3>4. 计算属性名称</h3>    <p>在 ES2015 之前,对象初始化器的属性名称是字面量,大多数情况下是静态字符串。要创建一个动态计算的属性名,你不得不使用属性访问器:</p>    <p><a href="/misc/goto?guid=4959675892102884728">Try in JS Bin</a></p>    <pre>  <code class="language-javascript">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 }</code></pre>    <p>当然,这种定义属性的方法差强人意。</p>    <p>计算属性名称能更优雅地解决这个问题。</p>    <p>当我们从表达式计算属性名称,将代码放在方括号之间 <code>{[expression]: value}</code>。这个表达式计算结果将成为属性名。</p>    <p>我真的很喜欢这个语法:短而简单。</p>    <p>让我们改进上面的代码:</p>    <p><a href="/misc/goto?guid=4959675892189537730">Try in JS Bin</a></p>    <pre>  <code class="language-javascript">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 }</code></pre>    <p><code>[prefix('number', 'pi')]</code> 通过计算 <code>prefix('number', 'pi')</code> 表达式来设置属性名称, 得到的结果是 <code>'number_pi'</code>。</p>    <p>相应地, <code>[prefix('bool', 'false')]</code> 将第二个属性名称设为 <code>'bool_false'</code>。</p>    <p>4.1 <code>Symbol</code> 作为属性名</p>    <p><a href="/misc/goto?guid=4959675892278431126">Symbols</a> 也可以被用来计算属性名称,只需要将它包含在方括号中:<code>{ [Symbol('name')]: 'Prop value' }</code>。</p>    <p>例如,使用特殊属性 <code>Symbol.iterator</code> 来迭代遍历一个对象的自有属性名,代码如下:</p>    <p><a href="/misc/goto?guid=4959675892369150488">Try in JS Bin</a></p>    <pre>  <code class="language-javascript">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']</code></pre>    <p><code>[Symbol.iterator]: function *() { }</code> 定义一个属性来用于迭代遍历对象自有属性。展开操作符 <code>[...object]</code> 使用迭代器并返回自有属性列表。</p>    <h3>5. 展望未来:rest 和属性展开</h3>    <p>对象字面量的 <a href="/misc/goto?guid=4959675892449927979">Rest 和属性展开</a> 是新的标准草案中的一个提案(stage 2),意味着这一特性是新版本 JavaScript 的规范的候选。</p>    <p>数组的 <a href="/misc/goto?guid=4959675892538277946">展开和 rest 操作符</a> 已经被实现了。</p>    <p><a href="/misc/goto?guid=4959675892621721076">Rest 属性</a> 允许我们从解构赋值左侧使用对象来收集属性,看下面的例子:</p>    <p><a href="/misc/goto?guid=4959675892703490526">Try in JS Bin</a></p>    <pre>  <code class="language-javascript">var object = {      propA: 1,    propB: 2,    propC: 3  };  let {propA, ...restObject} = object;    propA;      // => 1    restObject; // => { propB: 2, propC: 3 }</code></pre>    <p><a href="/misc/goto?guid=4959675892786610616">属性展开</a> 允许将源对象的自有属性拷进对象字面量内部。在上面的例子中,对象字面量从 <code>souce</code> 对象中收集额外的属性。</p>    <p><a href="/misc/goto?guid=4959675892878254751">Try in JS Bin</a></p>    <pre>  <code class="language-javascript">var source = {      propB: 2,    propC: 3  };  var object = {      propA: 1,    ...source  }  object; // => { propA: 1, propB: 2, propC: 3 }</code></pre>    <h3>6. 结论</h3>    <p>JavaScript 在快速进步。</p>    <p>即使是相对小的结构比如对象字面量在 ES2015 中都有相当大的改进,更别说还有一大堆新特性在草案中。</p>    <p>你可以从初始化器中使用 <code>__proto__</code> 属性直接设置对象的原型,这比使用 <code>Object.create()</code> 要更方便。</p>    <p>方法声明可以写成更简短的形式,这样你就不用写 <code>function</code> 关键字了。然后在速记方法中可以使用 <code>super</code> 关键字,它能提供方便的对被继承原型链上属性的访问。</p>    <p>如果一个属性名在运行时计算,现在你可以使用计算属性名称 <code>[表达式]</code> 来初始化对象。</p>    <p>的确,对象字面量现在很酷!</p>    <p>你觉得呢?欢迎在下方发表评论参与讨论。</p>    <p>来自:http://www.zcfy.cc/article/why-object-literals-in-javascript-are-cool-948.html</p>    <p><span style="color:rgb(255, 255, 255)">Save</span></p>