专栏首页终身学习者深入 JS 对象属性

深入 JS 对象属性

译者:前端小智 作者:Dr.Axel 来源:2ality

为了保证的可读性,本文采用意译而非直译。

腾讯云 热门云产品限量特惠秒杀,云服务器1核2G,99元/1年

海外1核2G服务器低至2折,半价续费券限量免费领取!

新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。

属性决定JS中对象的状态,本文章主要分析这些属性是如何工作的。

JS几种不同的属性

JS有三种不同的属性:数据属性,访问器属性和内部属性。

1.1 数据属性(properties

对象的普通属性将字符串名称映射到值。例如,下面对象obj有一个数据属性,名称为 prop,对应的值为 123

var obj = {
    prop: 123
};

可以用以下方式读取属性的值:

console.log(obj.prop); // 123
console.log(obj["prop"]); // 123

当然也可以用以下方式来设置属性的值:

obj.prop = "abc";
obj["prop"] = "abc";

1.2 访问器属性

另外,可以通过函数处理获取和设置属性值。 这些函数称为访问器函数。 处理获取的函数称为getter。 处理设置的函数称为setter

var obj = {
  get prop () {
    return 'Getter';
  },
  set prop (value) {
    console.log('Setter: ' + value);
  }
}

访问 obj 属性:

> obj.prop
 'Getter'
> obj.prop = 123;
  Setter: 123

1.3 内部属性

一些属性只是用于规范,这些属于“内部”的内部,因为它们不能直接访问,但是它们确实影响对象的行为。内部属性有特殊的名称都写在两个方括号,如:

  • 内部属性[[Prototype]]指向对象的原型。它可以通过Object.getPrototypeOf()读取。它的值只能通过创建具有给定原型的新对象来设置,例如通过object.create()__proto__
  • 内部属性[[Extensible]]决定是否可以向对象添加属性。可以通过Object.isExtensible() 方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)。可以通过Object.preventExtensions()方法让一个对象变的不可扩展,也就是永远不能再添加新的属性。

2. 属性特性(attribute)

属性的所有状态,包括数据和元数据,都存储在特性(attribute)中。它们是属性具有的字段,就像对象具有属性一样。特性(attribute)键通常用双括号编写:

以下特性是属于数据属性:

  • [[Value]]:该属性的属性值,默认为undefined
  • [[Writable]]:是一个布尔值,表示属性值(value)是否可改变(即是否可写),默认为true

以下特性是属于访问器属性:

[[Get]]:是一个函数,表示该属性的取值函数(getter),默认为undefined

[[Set]]:是一个函数,表示该属性的存值函数(setter),默认为undefined

所有的属性都具有以下的特性:

[[Enumerable]]:是一个布尔值,表示该属性是否可遍历,默认为true。如果设为false,会使得某些操作(比如for...in循环、Object.keys())跳过该属性。

[[Configurable]] :是一个布尔值,表示可配置性,默认为true。如果设为false,将阻止某些操作改写该属性,比如无法删除该属性,也不得改变该属性的属性描述对象(value属性除外)。也就是说,configurable属性控制了属性描述对象的可写性。

3. 属性描述

JavaScript 提供了一个内部数据结构,用来描述对象的属性,控制它的行为,比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”(attributes object)。每个属性都有自己对应的属性描述对象,保存该属性的一些元信息。下面是值为123属性描述对象的一个例子。

{
    value: 123,
    writable: false,
    enumerable: true,
    configurable: false
}

咱们也可以通过访问器属性实现相同的目标,属性描述对象如下所示:

{
  get: function () { return 123 },
  enumerable: true,
  configurable: false
}

3.1 使用属性描述符的函数

下面的函数允许咱们使用属性描述符:

Object.defineProperty(obj, propName, propDesc):该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

obj:要在其上定义属性的对象。 prop:要定义或修改的属性的名称。 descriptor:将被定义或修改的属性描述符。

var obj = Object.defineProperty({}, "foo", {
  value: 123,
})

Object.defineProperties(obj, propDescObj): 该方法直接在一个对象上定义一个或多个新的属性或修改现有属性,并返回该对象。

obj: 将要被添加属性或修改属性的对象

props: 该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

var obj = Object.defineProperties({}, {
  foo: { value: 123, enumerable: true },
  bar: { value: "abc", enumerable: true }
});

Object.create(proto, propDescObj?): 方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__

proto:新创建对象的原型对象。 propDescObj:可选。如果没有指定为 undefined,则是要添加到新创建对象的可枚举属性(即其自身定义的属性,而不是其原型链上的枚举属性)对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。

var obj = Object.create(Object.prototype, {
  foo: { value: 123, enumerable: true },
  bar: { value: "abc", enumerable: true }
})

Object.getOwnPropertyDescriptor(obj, propName): 该方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)

obj:需要查找的目标对象 prop:目标对象内属性名称

var o, d;

o = { get foo() { return 17; } };
d = Object.getOwnPropertyDescriptor(o, "foo");
// d {
//   configurable: true,
//   enumerable: true,
//   get: /*the getter function*/,
//   set: undefined
// }

4.可枚举性(Enumerable)

本节说明哪些操作受可枚举性影响,哪些操作不受可见性影响。 下面,假设有以下定义:

var proto = Object.defineProperties({}, {
  foo: { value: 1, enumerable: true },
  bar: { value: 2, enumerable: false }
})

var obj = Object.create(proto, {
  baz: { value: 1, enumerable: true },
  gux: { value: 2, enumerable: false}
})

请注意,对象(包括proto)通常至少具有原型Object.prototype:

> Object.getPrototypeOf({}) === Object.prototype
  true

Object.prototype是定义标准方法(如toStringhasOwnProperty)的地方。

4.1 受可枚举性影响的操作

可枚举性仅影响两个操作:for-in循环和Object.keys()

for-in循环遍历所有可枚举属性的名称,包括继承的属性(请注意,Object.prototype的所有非可枚举属性都不会显示):

> for (var x in obj) console.log(x);
    baz
    foo

Object.keys() 返回所有自有(非继承)可枚举属性的名称:

> Object.keys(obj)
 [ 'baz' ]

如果需要所有属性的名称,则需要使用Object.getOwnPropertyNames()

4.2 忽略可枚举性的操作

除了上达两个,其他操作都忽略了可枚举性,还有一些操作会考虑继承:

> "toString" in obj
true
> obj.toString
[Function: toString]

还有一些仅读取自有属性:

> Object.getOwnPropertyNames(obj)
[ 'baz', 'qux' ]

> obj.hasOwnProperty("qux")
true
> obj.hasOwnProperty("toString")
false

> Object.getOwnPropertyDescriptor(obj, "qux")
{ value: 2,
  writable: false,
  enumerable: false,
  configurable: false }
> Object.getOwnPropertyDescriptor(obj, "toString")
undefined

创建,删除和定义属性仅影响原型链中的第一个对象:

obj.propName = value
obj["propName"] = value

delete obj.propName
delete obj["propName"]

Object.defineProperty(obj, propName, desc)
Object.defineProperties(obj, descObj)

5. 最佳实践

一般规则是系统创建的属性是不可枚举的,而用户创建的属性是可枚举的:

> Object.keys([])
[]
> Object.getOwnPropertyNames([])
[ 'length' ]
> Object.keys(['a'])
[ '0' ]

这特别适用于原型对象中的方法:

> Object.keys(Object.prototype)
[]
> Object.getOwnPropertyNames(Object.prototype)
[ hasOwnProperty',
  'valueOf',
  'constructor',
  'toLocaleString',
  'isPrototypeOf',
  'propertyIsEnumerable',
  'toString' ]

因此,对于咱们的代码,应该忽略可枚举性。通常不应该向内置原型和对象添加属性,但如果这样做,咱们就应该使它们不可枚举以避免破坏内置代码。

正如咱们所看到的,非可枚举性主要受益于for-in并且确保使用它的遗留代码不会中断。 不可枚举的属性创建了一种错觉,即for-in仅迭代用户创建的对象自有的属性。 在咱们的代码中,如果可以,应该避免使用for-in

原文:https://2ality.com/2012/08/in...

推荐:

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS中轻松遍历对象属性的几种方式

    Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一...

    前端小智@大迁世界
  • JavaScript 对象可以做到的三件事

    除了普通的对象属性赋值和遍历之外,我们还可以使用 JavaScript 对象执行许多其他操作。在本文中,我们将了解如何使用它们,包括访问内部属性、操作属性描述符...

    前端小智@大迁世界
  • 使用这些 CSS 属性选择器来提高前端开发效率!

    这样任何具有href属性的且没有更特定选择器的元素的文本颜色都会是红色的。属性选择器的特性与类相同。

    前端小智@大迁世界
  • [第1期] ES6之路--对象的扩展

    桃翁
  • 原来这才是拷贝对象属性的正确姿势!从源码中学习 js !

    引擎源码里富含了许多知识,之所以能成为引擎,一定有可学习的地方。让我们一起从源码里学习 js 知识吧。

    白玉无冰
  • 对象的扩展

    李才哥
  • JS对象那些事儿

    JavaScript中几乎所有东西都是一个对象,除了六种基本类型数据 - null,undefined,strings,numbers,boolean和symb...

    前端知否
  • 《你不知道的JavaScript》:js对象的属性特性和枚举深入

    可以看到,检测属性的结果打印为4个属性数据描述符:value(属性值)、writable(可写)、enumerable(可枚举)、configurable(可配...

    前端_AWhile
  • VBA对象属性概述

    上节概述了对象模型的基础知识,而对象的学习重点其实就是它们的属性和方法,不同对象都有诸多不同的属性和方法,后期将从常用对象的属性和方法循序渐进的展开。

    无言之月
  • JavaScript 深拷贝性能分析

    作者:justjavac 链接:https://segmentfault.com/a/1190000013107871 如何在 JavaScript 中拷贝一个...

    程序员宝库

扫码关注云+社区

领取腾讯云代金券