为什么JS中的对象字面量很酷

在 ES6 之前，JS 中的对象字面量(也称为对象初始化器)是非常基础的。可以定义两种类型的属性：

创新互联专注于五常企业网站建设,响应式网站设计,商城网站建设。五常网站建设公司,为五常等地区提供建站服务。全流程定制设计，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

  • 键值对 {name1: value1}
  • 获取器 { get name(){..} } 和 设置器 { set name(val){..}} 的计算属性值

JS 是一种基于原型的语言，因此一切都是对象。在对象创建，配置和访问原型时，必须提供一种易于构造的语言。

定义一个对象并设置它的原型是一个常见的任务。最好的方式是直接在对象字面量使用一条语句来设置原型。

不幸的是，字面量的局限性不允许用一个简单的解决方案来实现这一点。必须结合使用object.create() 和对象字面量来设置原型。

我认为这种解决方案不够灵活。JS 是基于原型的，为什么要用原型创建对象那么麻烦?

幸运的是，JS 也在慢慢完善。JS 中很多令人沮丧的问题都是逐步解决的。

本文演示了 ES 6 如何解决上述问题，并使用额外的功能改进对象字面量。

  • 在对象构造上设置原型
  • 方法的声明
  • super 调用
  • 计算属性名 

1. 在对象构造上设置原型

如你所知，访问现有对象原型的一种方法是使用 getter 属性 __proto__：

 
 
 
 
    
  
  
  
  
  1. var myObject = { 
    2. 
  
  
  
  
  2.   name: 'Hello World!', 
    3. 
  
  
  
  
  3. }; 
    4. 
  
  
  
  
  4. myObject.__proto__; // => {} 
    5. 
  
  
  
  
  5. myObject.__proto__.isPrototypeOf(myObject); // => true 
    6.

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

请注意，不建议将 object.__ proto__ 用作 getter/setter。替代方法应考虑使用Object.getPrototypeOf() 和 Object.setPrototypeOf()。

ES6允许使用__proto__作为属性名，并在 {__proto__：protoObject}中设置原型。

接着，咱们使用 __proto__ 属性进行对象初始化，并优化上面的代码：

 
 
 
 
    
  
  
  
  
  1. var myProto = { 
    2. 
  
  
  
  
  2.   propertyExists: function(name) { 
    3. 
  
  
  
  
  3.     return name in this; 
    4. 
  
  
  
  
  4.   }, 
    5. 
  
  
  
  
  5. }; 
    6. 
  
  
  
  
  6. var myNumbers = { 
    7. 
  
  
  
  
  7.   __proto__: myProto, 
    8. 
  
  
  
  
  8.   array: [1, 6, 7], 
    9. 
  
  
  
  
  9. }; 
    10. 
  
  
  
  
  10. myNumbers.propertyExists('array'); // => true 
    11. 
  
  
  
  
  11. myNumbers.propertyExists('collection'); // => false 
    12.

myNumbers 对象是使用特殊属性名 proto 与创建原型 myProto，这次咱们使用一条语句就创建，没有像上面还需要 object.create() 这样的附加函数。

如你所看，使用 __proto__ 进行编码很简单，我一直喜欢简单明了的解决方案。

说点脱离主题。我觉得奇怪的是，简单灵活的解决方案需要大量的工作和设计。如果解决方案很简单，你可能会认为设计起来很容易。但是反之亦然：

  • 要使它简单明了是很复杂的
  • 把它变得复杂和难以理解是很容易的

如果某些东西看起来太复杂或难以使用，则可能还需要进一步的完善。

你对简单性有何看法?(请在下面随意写评论)

2. proto 用法的特殊情况

即使__proto__看起来很简单，您也应该注意一些特殊情况。

在对象字面量中只能使用__proto__一次，否则 JS 会报错：

 
 
 
 
    
  
  
  
  
  1. var object = { 
    2. 
  
  
  
  
  2.   __proto__: { 
    3. 
  
  
  
  
  3.     toString: function() { 
    4. 
  
  
  
  
  4.       return '[object Numbers]' 
    5. 
  
  
  
  
  5.     } 
    6. 
  
  
  
  
  6.   }, 
    7. 
  
  
  
  
  7.   numbers: [1, 5, 89], 
    8. 
  
  
  
  
  8.   __proto__: { 
    9. 
  
  
  
  
  9.     toString: function() { 
    10. 
  
  
  
  
  10.       return '[object ArrayOfNumbers]' 
    11. 
  
  
  
  
  11.     } 
    12. 
  
  
  
  
  12.   } 
    13. 
  
  
  
  
  13. }; 
    14.

上面示例中的对象字面量中使用两次__proto__属性，这是不允许的。在这种情况下，将在会抛出错误：SyntaxError: Duplicate __proto__ fields are not allowed in object literals 。

JS 约束只能用一个对象或 null 作为 __proto__ 属性的值。任何使用原始类型(字符串，数字，布尔值)或 undefined 类型都将被忽略，并且不会更改对象的原型。

 
 
 
 
    
  
  
  
  
  1. var objUndefined = { 
    2. 
  
  
  
  
  2.   __proto__: undefined, 
    3. 
  
  
  
  
  3. }; 
    4. 
  
  
  
  
  4. Object.getPrototypeOf(objUndefined); // => {} 
    5. 
  
  
  
  
  5. var objNumber = { 
    6. 
  
  
  
  
  6.   __proto__: 15, 
    7. 
  
  
  
  
  7. }; 
    8. 
  
  
  
  
  8. Object.getPrototypeOf(objNumber); // => {} 
    9.

对象字面量使用 undefined 和 数字 15 来设置 __proto__ 值。因为仅允许将对象或 null 用作原型，所以__proto__值将被忽略，但 objUndefined 和objNumber 仍具有其默认原型：纯 JS 对象 {}, 。

当然，尝试使用基本类型来设置对象的原型也会很奇怪。

当对象字面具有计算结果为'proto'的字符串时 {['__proto__']：protoObj }，也要小心。以这种方式创建的属性不会更改对象的原型，而只是使用键 '__proto__' 创建一个拥有的属性

3. 简写方法定义

可以使用较短的语法在对象常量中声明方法，以省略 function 关键字和 ： 冒号的方式。这被称为简写方法定义。

接着，咱们使用简写的方法来定义一些方法：

 
 
 
 
    
  
  
  
  
  1. var collection = { 
    2. 
  
  
  
  
  2.   items: [], 
    3. 
  
  
  
  
  3.   add(item) { 
    4. 
  
  
  
  
  4.     this.items.push(item); 
    5. 
  
  
  
  
  5.   }, 
    6. 
  
  
  
  
  6.   get(index) { 
    7. 
  
  
  
  
  7.     return this.items[index]; 
    8. 
  
  
  
  
  8.   }, 
    9. 
  
  
  
  
  9. }; 
    10. 
  
  
  
  
  10. collection.add(15); 
    11. 
  
  
  
  
  11. collection.add(3); 
    12. 
  
  
  
  
  12. collection.get(0); // => 15 
    13.

一个很好的好处是，以这种方式声明的方法被命名为函数，这对于调试目的很有用。从上面示例中执行 collection.add.name 会返回函数名称 “add”。

(1) super 的使用

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

calc 是 numbers 对象的原型。在 numbers 的 sumElements方法中，可以使用super关键字从原型访问方法：super.sumElements()

最终，super 是从对象原型链访问继承的属性的快捷方式。

在前面的示例中，可以尝试直接执行 calc.sumElements() 来调用原型，会报错。然而，super.sumElements() 可以正确调用，因为它访问对象的原型链。并确保原型中的sumElements() 方法使用 this.numbers 正确访问数组。

super 存在清楚地表明继承的属性将被使用。

(2) super 使用限制

super 只能在对象字面量的简写方法定义内使用。

如果试图从普通方法声明{ name: function(){} } 访问它，JS 将抛出一个错误:

方法 sumElements 被定义为一个属性: sumElements: function(){…}。因为super 只能在简写方法中使用，所以在这种情况下调用它会抛出 SyntaxError: 'super' keyword unexpected here。

此限制在很大程度上不影响对象字面量的声明方式。由于语法较短，因此通常最好使用简写方法定义。

4. 计算属性名

在 ES6 之前，对象初始化使用的是字面量的形式，通常是静态字符串。要创建具有计算名称的属性，就必须使用属性访问器。

 
 
 
 
    
  
  
  
  
  1. function prefix(prefStr, name) { 
    2. 
  
  
  
  
  2.   return prefStr + '_' + name; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. var object = {}; 
    5. 
  
  
  
  
  5. object[prefix('number', 'pi')] = 3.14; 
    6. 
  
  
  
  
  6. object[prefix('bool', 'false')] = false; 
    7. 
  
  
  
  
  7. object; // => { number_pi: 3.14, bool_false: false } 
    8.

当然，这种定义属性的方式是令人愉快的。

接着使用简写方式来改完上面的例子：

 
 
 
 
    
  
  
  
  
  1. function prefix(prefStr, name) { 
    2. 
  
  
  
  
  2.   return prefStr + '_' + name; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. var object = { 
    5. 
  
  
  
  
  5.   [prefix('number', 'pi')]: 3.14, 
    6. 
  
  
  
  
  6.   [prefix('bool', 'false')]: false, 
    7. 
  
  
  
  
  7. }; 
    8. 
  
  
  
  
  8. object; // => { number_pi: 3.14, bool_false: false } 
    9.

[prefix('number'，'pi')]通过计算 prefix('number', 'pi') 表达式(即'number_pi')来设置属性名称。

相应地，[prefix('bool', 'false')] 将第二个属性名称设置为'bool_false'。

(1) symbol 作为属性名称

symbol 也可以用作计算的属性名称。只要确保将它们包括在方括号中即可：{[Symbol('name')]：'Prop value'}

例如，用特殊属性 Symbol.iterator 并迭代对象自身的属性名称。如下示例所示：

[Symbol.iterator]: function *() { } 定义一个属性，该属性用于迭代对象的自有属性。展开运算符 [... object] 使用迭代器并返回自有的属性的列表。

剩余和展开属性

剩余属性允许从对象中收集在分配销毁后剩下的属性。

下面的示例在解构对象之后收集剩余的属性：

 
 
 
 
    
  
  
  
  
  1. var object = { 
    2. 
  
  
  
  
  2.   propA: 1, 
    3. 
  
  
  
  
  3.   propB: 2, 
    4. 
  
  
  
  
  4.   propC: 3, 
    5. 
  
  
  
  
  5. }; 
    6. 
  
  
  
  
  6. let { propA, ...restObject } = object; 
    7. 
  
  
  
  
  7. propA; // => 1 
    8. 
  
  
  
  
  8. restObject; // => { propB: 2, propC: 3 } 
    9.

展开属性允许将源对象的自有属性复制到对象文字面量中。在此示例中，对象字面量从源对象收集到对象的其他属性：

 
 
 
 
    
  
  
  
  
  1. var source = { 
    2. 
  
  
  
  
  2.   propB: 2, 
    3. 
  
  
  
  
  3.   propC: 3, 
    4. 
  
  
  
  
  4. }; 
    5. 
  
  
  
  
  5. var object = { 
    6. 
  
  
  
  
  6.   propA: 1, 
    7. 
  
  
  
  
  7.   ...source, 
    8. 
  
  
  
  
  8. }; 
    9. 
  
  
  
  
  9. object; // => { propA: 1, propB: 2, propC: 3 } 
    10.

6. 总结

在 ES6 中，即使是作为对象字面量的相对较小的结构也得到了相当大的改进。

可以使用__proto__ 属性名称直接从初始化器设置对象的原型。这比使用Object.create() 更容易。

请注意，__proto__ 是 ES6 标准附件B的一部分，不鼓励使用。该附件实现对于浏览器是必需的，但对于其他环境是可选的。NodeJS 4、5和6支持此功能。

现在方法声明的形式更短，因此不必输入 function 关键字。在简化方法中，可以使用super关 键字，该关键字可以轻松访问对象原型链中的继承属性。

如果属性名称是在运行时计算的，那么现在您可以使用计算的属性名称[expression]来初始化对象。

当前标题：为什么JS中的对象字面量很酷
网址分享：http://www.36103.cn/qtweb/news2/13302.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

手机网站建设知识

各行业网站

重庆主机托管　　 　内江广告　　 　成都光华电信机房　　 　广安网站建设　　 　艾名斯智能　　 　大英网站建设　　 　温江网站建设　　 　黔盛装饰　　 　蓬安网站建设　　 　网站解决方案　　 　四川服务器托管　　 　网站快速收录　　 　成都服装定制　　 　成都网站维护　　 　广安网站制作公司　　 　企业网站改版　　 　四川柴油发电机　　 　域名申请　　 　眉山服务器租用　　 　企业网站建设公司