详解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对象字面量的资料请关注我们其它相关文章!

时间: 2021-05-03

JavaScript面试中常考的字符串操作方法大全(包含ES6)

一.charAt() 返回在指定位置的字符. var str="abc" console.log(str.charAt(0))//a 二.charCodeAt() 返回在指定的位置的字符的 Unicode 编码. var str="abc" console.log(str.charCodeAt(1))//98 三.concat() 连接字符串. var a = "abc"; var b = "def"; var c = a.c

JS面向对象编程——ES6 中class的继承用法详解

本文实例讲述了 ES6 中class的继承用法.分享给大家供大家参考,具体如下: JS是一种基于对象的语言,要实现面向对象,写法跟传统的面向对象有很大的差异.ES6引入了Class语法糖,使得JS的继承更像面向对象语言的写法. 此篇博客,分为:基本介绍.Vue使用案例 基本介绍 Class可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多: class Father { } class Son extends Father { } 代码定义了一个Son 类

JavaScript对象字面量和构造函数原理与用法详解

本文实例讲述了JavaScript对象字面量和构造函数.分享给大家供大家参考,具体如下: 对象中只有两种属性:(一种比较细的分法) 属性(数据属性)比如:名字,年龄,性别,出版社,地址等信息: 方法(封装代码的属性:函数 ,在这也是一种属性). 在JS中对象的字面量和构造函数是非常的重点,其实在其他的语言中,是没有对象字面量的. 一.对象的字面量的语法: { 属性名: 属性值, 属性名: 属性值, 方法名: 你们函数 } 这个大括号括起来的整个代码块就是叫做对象. var p1 = { } ①访

原生JavaScript之es6中Class的用法分析

本文实例讲述了原生JavaScript之es6中Class的用法.分享给大家供大家参考,具体如下: es6class写法 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } es5写法 function Point(x, y) { this.x = x; this.y = y; } Point.prototyp

Javascript对象字面量的理解

对象字面量的输出方式以及定义好处 1.对象字面量的输出方式有两种:传统的'.',以及数组方式,只不过用数组方式输出时,方括号里面要用引号括起来,如 var box = { name:'abc'; age:28 }; alert(box['name']); 给对象定义方法, A:如果用传统定义对象的方式,就需要先定义方法,然后再把这个方法名赋值给对象的一个属性,如果要调用这个方法不加括号,就是返回方法代码:如果要调用这个方法该对象属性后面加上括号,就得到方法的返回值 function objrun

浅谈js之字面量、对象字面量的访问、关键字in的用法

一:字面量含义 字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal)和 对象字面量(object literal),另外还有函数字面量(function literal). 示例: var test="hello world!"; "hello world!"就是字符串字面量,test是变量名. 二:对象字面量 对象字面量有两种访问方式

解决node终端下运行js文件不支持ES6语法

最近写一些简单的测试代码时,为了方便直接在node终端执行发现有些ES6语法不支持,记录一下解决方式 现象 新建class.js文件后添加如下代码 // constructer class Person { constructor(name,age,sex) { this.name = name; this.age = age; this.sex = sex; } getInfo() { return `name:${this.name},age:${this.age},sex:${this.s

JavaScript 对象字面量讲解

在编程语言中,字面量是一种表示值的记法.例如,"Hello, World!" 在许多语言中都表示一个字符串字面量(string literal ),JavaScript也不例外.以下也是JavaScript字面量的例子,如5.true.false和null,它们分别表示一个整数.两个布尔值和一个空对象. JavaScript还支持对象和数组字面量,允许使用一种简洁而可读的记法来创建数组和对象.考虑以下语句,其中创建了一个包含两个属性的对象(firstName和lastName): 还可

JavaScript ES6 Class类实现原理详解

JavaScript ES6之前的还没有Class类的概念,生成实例对象的传统方法是通过构造函数. 例如: function Mold(a,b){ this.a=a; this.b=b; } Mold.prototype.count=function(){ return this.a+this.b; }; let sum=new Mold(1,2); console.log(sum.count()) //3 这中写法跟传统的面向对象语言差异较大,写起来也比较繁杂. ES6提供了更加接近其他语言的

JavaScript ES6中CLASS的使用详解

前言 对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重要的原因.js里面有许多语法的缺点:繁琐杂乱的.prototype 引用.试图调用原型链上层同名函数时的显式伪多态以及不可靠.不美观而且容易被误解成"构造函数"的.constructor. 除此之外,类设计其实还存在更进一步的问题.传统面向类的语言中父类和子类.子类和实例之间其实是复

JavaScript中定义类的方式详解

本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类定义,并创建对象. 一.定义类并创建类的实例对象 在Javascript中,我们用function来定义类,如下: function Sh

javascript中定义类的方法详解

JS中定义类的方式有很多种: 1.工厂方式 复制代码 代码如下: function Car(){    var ocar = new Object;    ocar.color = "blue";    ocar.doors = 4;    ocar.showColor = function(){     document.write(this.color)    };    return ocar;   }   var car1 = Car();   var car2 = Car()

Javascript原型链及instanceof原理详解

instanceof:用来判断实例是否是属于某个对象,这个判断依据是什么呢? 首先,了解一下javascript中的原型继承的基础知识: javascript中的对象都有一个__proto__属性,这个是对象的隐式原型,指向该对象的父对象的原型(prototype).显式的原型对象使用prototype,但是Object.prototype.proto=null; 判断某个对象a是否属于某个类A的实例,可以通过搜索原型链. 实例对象属性查找顺序是:实例对象内部---->构造函数原型链---->

PHP框架自动加载类文件原理详解

描述:公司项目PHP用作中间转发层(接收http请求,用 socket跟c++做通信),由于代码没有用到框架,这些东西自然就是之前的人自己写的.最近需要对这个底层进行优化,于是便看了下这部分的代码. 目的:这块代码的主要作用是把主目录下的所有插件类一次性全部加载进来.当使用尚未被定义的类(class)和接口(interface)时自动去加载.通过注册自动加载器,脚本引擎在 PHP 出错失败前有了最后一个机会加载所需的类. 实现方法:主要用到PHP函数__autoload() 详细: error_

如何让node运行es6模块文件及其原理详解

最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机制.而现在我们很多项目都是用 es6 的模块化规范来写代码的,包括 node 项目,所以,node 不能运行 es6 模块文件就会很不便. 让 node 运行 es6 模块文件的方式有两种: 转码 es6 模块为 commonjs 模块 hook node 的 require 机制,直接让 node 的 require 加载 import/expor

玩转JavaScript OOP - 类的实现详解

概述 当我们在谈论面向对象编程时,我们在谈论什么? 我们首先谈论的是一些概念:对象.类.封装.继承.多态. 对象和类是面向对象的基础,封装.继承和多态是面向对象编程的三大特性. JavaScript提供了对象却缺乏类,它不能像C#一样能显式地定义一个类. 但是JavaScript的函数功能非常灵活,其中之一就是构造函数,结合构造函数和原型对象可以实现"类". 对象和类的概念 对象 "对象"是面向对象编程中非常重要的一个概念,一个对象是一个"东西"

JavaScript原型继承和原型链原理详解

这篇文章主要介绍了JavaScript原型继承和原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在讨论原型继承之前,先回顾一下关于创建自定义类型的方式,这里推荐将构造函数和原型模式组合使用,通过构造函数来定义实例自己的属性,再通过原型来定义公共的方法和属性. 这样一来,每个实例都有自己的实例属性副本,又能共享同一个方法,这样的好处就是可以极大的节省内存空间.同时还可以向构造函数传递参数,十分的方便. 这里还要再讲一下两种特色的构造

JavaScript对象原型链原理详解

这篇文章主要介绍了JavaScript对象原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一个js对象,除了自己设置的属性外,还会自动生成proto.class.extensible属性,其中,proto属性指向对象的原型. 对象的属性也有writable.enumerable.configurable.value和get/set的配置方法. 对象的创建方式有三种: 一.使用字面量直接创建. 二.基于原型链创建. 分析上图,要点如