深刻 JS 对象属性

译者：前端小智
做者：Dr.Axel
来源：2ality

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

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

为了回馈读者，《大迁世界》不按期举行(每月一到三次)，现金抽奖活动，保底200，外加用户赞扬，但愿你能成为大迁世界的小锦鲤，快来试试吧

属性决定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是定义标准方法（如toString和hasOwnProperty）的地方。

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。

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。