http://it.njjyzj.gov.cn

详解JS中的对象字面量_JavaScript_网络编程

前言

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

  • 键值对{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 =qTMsg { 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 如何解决上述问题,并使用额外的功能改进对象字面量。

    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

    郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

    上一篇:浅谈JS前端模块化的几种规范_JavaScript_网络编程
    下一篇:Js模块打包exports require import的用法和区别_JavaScript_网络编程