JavaScript 属性描述符

前言

此文总结了属性描述符的作用和特性，以及限制对象操作的部分方法。

Object.defineProperty

Object.defineProperty 用于指定对象属性的描述符。

函数的第三个参数descriptor为属性的描述符，包括数据描述符和存取描述符两种。

var object = {}// 数据描述符
Object.defineProperty(object, 'foo', {configurable: true,enumerable: true,writable: true,value: 1,
})// 存取描述符
Object.defineProperty(object, 'bar', {configurable: true,enumerable: true,get() {},set() {},
})

注意属性描述符固定包括configurable、enumerable、writable和value四个键，存取描述符固定包括configurable、enumerable、get和set四个键。

描述符中公共键为configurable和enumerable，数据描述符的writable与value键成对，存取描述符的get和set键成对

默认键值

属性描述符的键是有默认值的，但是由于对象属性的指定方式不同，存在差异。

Object.getOwnPropertyDescriptors 用于获取对象自身所有属性的描述符

字面量方式。

var object = {foo: 1,get bar() {},
}Object.getOwnPropertyDescriptors(object)
// {//   bar: {//     configurable: true,
//     enumerable: true,
//     get: f bar(),
//     set: undefined,
//   },
//   foo: {//     configurable: true,
//     enumerable: true,
//     value: 1,
//     writable: true,
//   },
// }

defineProperty方式。

var object = {}Object.defineProperty(object, 'foo', {value: 1,
})
Object.defineProperty(object, 'bar', {get() {},
})
Object.defineProperty(object, 'baz', {})Object.getOwnPropertyDescriptors(object)
// {//   bar: {//     configurable: false,
//     enumerable: false,
//     get: f bar(),
//     set: undefined,
//   },
//   baz: {//     configurable: false,
//     enumerable: false,
//     value: undefined,
//     writable: false,
//   },
//   foo: {//     configurable: false,
//     enumerable: false,
//     value: 1,
//     writable: false,
//   },
// }

比较发现，字面量方式指定的属性的描述符默认键值都为true。

而defineProperty方式则相对为false，很好理解，defineProperty旨在细化地描述属性，即指定什么就是什么，未指定的当然为false。

另外defineProperty指定为空描述符时，默认为数据描述符形式。存取描述符中的get和set指定了才会有，不指定默认为undefined。

configurable

是否可以删除此属性。

注意非严格模式下删除静默失败，严格模式将抛出错误。

'use strict'var object = {}Object.defineProperty(object, 'foo', {value: 1,configurable: false,
})delete object.foo // Uncaught TypeError: Cannot delete property 'foo' of #<Object>object // {foo: 1}

是否可以修改描述符的键值，例如修改enumerable。

var object = {}Object.defineProperty(object, 'foo', {configurable: false,enumerable: true,value: 1,
})Object.defineProperty(object, 'foo', {enumerable: false, // Uncaught TypeError: Cannot redefine property: foo at Function.defineProperty (<anonymous>)
})

注意有两个特例，value和writable。

value键的值可以修改。

var object = {}Object.defineProperty(object, 'foo', {configurable: false,writable: true,value: 1,
})Object.defineProperty(object, 'foo', {value: 12,
})object // {foo: 12}

writable键的值只能由true修改为false。

var object = {}Object.defineProperty(object, 'foo', {configurable: false,writable: true,value: 1,
})Object.defineProperty(object, 'foo', {writable: false,
})object // {foo: 1}

但是不能由false修改为true。

var object = {}Object.defineProperty(object, 'foo', {configurable: false,writable: false,value: 1,
})Object.defineProperty(object, 'foo', {writable: true, // Uncaught TypeError: Cannot redefine property: foo at Function.defineProperty (<anonymous>)
})

所以configurable用于表示属性是否可删除，描述符的键是否可修改。

当configurable为false时，属性不能被删除。除了writable和value之外的键（包括configurable、enumerable、set和get）不能修改，注意writable也只能修改为false。

enumerable

是否可以枚举此属性。

var object = { foo: 1 }Object.defineProperty(object, 'bar', {enumerable: false,value: 2,
})for (var prop in object) {console.log(prop) // foo
}Object.keys(object) // ['foo']JSON.stringify(object) // {"foo":1}Object.assign({}, object) // {foo: 1}object // {foo: 1, bar: 2}

Object.prototype.propertyIsEnumerable 可用于判断对象的属性值是否可枚举

几种遍历对象的方式。

for...in：遍历对象自身和继承的可枚举属性，不包括Symbol属性
Objects.keys / Objects.values / Objects.entries：返回对象自身的键或值组成的数组，也是可枚举属性，不包括Symbol键
Object.getOwnPropertyNames：返回对象自身的属性，不包括Symbol属性
Object.getOwnPropertySymbols：返回对象自身的Symbol属性
Reflect.ownKeys：返回对象自身的所有属性

writable

是否可以修改此属性。

注意非严格模式下修改静默失败，严格模式将抛出错误。

'use strict'var object = {}Object.defineProperty(object, 'foo', {writable: false,value: 1,
})object.foo = 2 // Uncaught TypeError: Cannot assign to read only property 'foo' of object '#<Object>'object // {foo: 1}

configurable为true时，可以先删除，再添加属性，达到修改属性的目的。

'use strict'var object = {}Object.defineProperty(object, 'foo', {configurable: true,writable: false,value: 1,
})delete object.foo
object.foo = 2object // {foo: 2}

value

指定属性值，默认为undefined。

var object = {}Object.defineProperty(object, 'foo', {})object // {foo: undefined}

get

访问器getter，在访问对象属性时触发。

var object = {}Object.defineProperty(object, 'foo', {get() {console.log('get')},
})object.foo // get

特别注意get函数内this会静默绑定。

var object = {}Object.defineProperty(object, 'foo', {get() {console.log(this === object) // true},
})object.foo

观察发现，点运算符（.）左边的对象是谁，this就指向谁。

var object = {}Object.defineProperty(object, 'foo', {get() {console.log(this === o) // true},
})var o = Object.create(object)o.foo

换句话说this指向触发读取操作时的对象。

set

访问器setter，在修改对象属性值时触发。

var object = {}Object.defineProperty(object, 'foo', {set() {console.log('set')},
})object.foo = 1 // set

类似的，set函数内this指向触发修改操作时的对象。

小结

描述符分为数据和存取两种类型，数据类型包括configurable、enumerable、writable和value，存取类型包括configurable、enumerable、get和set
字面量指定的属性描述符的默认键值为true，defineProperty为false
若属性的configurable键值为false，不能删除此属性，也不能修改除了writable和value之外的键，且writable也只能修改为false
若属性的enumerable为false，不可枚举此属性，或者说会被忽略。例如for...in、Object.keys、JSON.stringify和Object.assign
若属性的writable为false，不可修改此属性
访问器属性有get和set，在访问对象属性时触发get，在修改对象属性值时触发set，两者内部都会静默绑定this，指向触发操作时的对象

对象

除了属性描述符可以限制对象的操作之外，Object上也有方法限制对象的操作。

Object.preventExtensions

Object.preventExtensions 表示让对象不可拓展。

不能添加新的属性。

注意非严格模式下添加属性静默失败，严格模式将抛出错误。

'use strict'var object = {}Object.preventExtensions(object)object.foo = 1 // Uncaught TypeError: Cannot add property foo, object is not extensibleobject // {}

另外对象的内部槽[[prototype]]也不可变，即不能修改原型的指向。

__proto__修改将抛出错误。

var object = {}Object.preventExtensions(object)object.__proto__ = {} // Uncaught TypeError: #<Object> is not extensible at set __proto__ [as __proto__] (<anonymous>)

setPrototypeOf也会抛出错误。

var object = {}Object.preventExtensions(object)Object.setPrototypeOf(object, {}) // Uncaught TypeError: #<Object> is not extensible at Function.setPrototypeOf (<anonymous>)

所以preventExtensions作用的对象，不能添加新的属性，也不能修改原型的指向。

Object.isExtensible 可用于判断对象是否可扩展

Object.seal

Object.seal 表示封闭对象。

seal封闭对象时，也会将对象变为不可拓展。所以封闭的对象也有类似preventExtensions的性质，例如不能添加属性，不可修改原型的指向。

var object = { foo: 1 }Object.seal(object)Object.isExtensible(object) // false

seal还会将对象的所有属性的描述符中的configurable置为false。

所以seal作用的对象上的所有属性，都不能删除，也不能修改描述符中除了writable和value之外的键，且writable只能修改为false。

var object = {foo: 1,get bar() {},
}Object.defineProperty(object, 'baz', {configurable: true,value: 2,
})Object.seal(object)Object.getOwnPropertyDescriptors(object)
// {//   bar: {//     configurable: false,
//     enumerable: true,
//     get: f bar(),
//     set: undefined,
//   },
//   baz: {//     configurable: false,
//     enumerable: false,
//     value: 2,
//     writable: false,
//   },
//   foo: {//     configurable: false,
//     enumerable: true,
//     value: 1,
//     writable: true,
//   },
// }

Object.isSealed 用于判断对象是否封闭

Object.freeze

Object.freeze 表示冻结对象。

freeze冻结对象时，会将对象封闭并变为不可拓展。

var object = { foo: 1 }Object.freeze(object)Object.isSealed(object) // trueObject.isExtensible(object) // false

非严格模式修改属性静默失败，严格模式将抛出错误。

'use strict'var object = { foo: 1 }Object.freeze(object)object.foo = 2 // ncaught TypeError: Cannot assign to read only property 'foo' of object '#<Object>'object // {foo: 1}

freeze还会将对象的所有属性的数据描述符中的writable置为false。

var object = { foo: 1 }Object.defineProperty(object, 'bar', {configurable: true,writable: true,value: 2
})Object.freeze(object)Object.getOwnPropertyDescriptors(object)
// {//   bar: {//     configurable: false,
//     enumerable: false,
//     value: 2,
//     writable: false,
//   },
//   foo: {//     configurable: false,
//     enumerable: true,
//     value: 1,
//     writable: false,
//   },
// }

所以freeze冻结的对象几乎不能做任何操作，但是注意freeze只是浅冻结。

var object = {foo: 1,bar: {baz: 2,},
}Object.freeze(object)object.bar.baz = 3object
// {//   bar: { baz: 3 },
//   foo: 1,
// }

Object.isFrozen 用于判断对象是否冻结

深度冻结

兼容IE9。

Object.deepFreeze = function (object) {var prop, value, propNames = Object.getOwnPropertyNames(object)for (var i = 0; i < propNames.length; i++) {prop = propNames[i]value = object[prop]if (typeof value === 'object' && value !== null) {Object.deepFreeze(value)}}return Object.freeze(object)
}

注意Object.keys只能获取到对象自身的不可枚举属性，而getOwnPropertyNames可以获取对象自身的所有非Symbol属性

解冻

冻结实际上是不可逆的，无法解冻原对象。

但是可以通过深度克隆并覆盖原对象，达到解冻的目的。

var object = {foo: 1,bar: {},
}Object.deepFreeze(object)// or JSON.parse(JSON.stringify(object))
object = deepClone(object)object.bar.baz = 2object
// {//   foo: 1,
//   bar: { baz: 2 },
// }

本质上仅仅是将变量的内存空间指向了另一个对象，原对象还是冻结的。另外若变量object以const的方式声明，此方式也将失效。

注意 JSON.stringify 深拷贝时，可能会丢失掉部分属性

数组

数组也是一类特殊的对象，数组下标相当于是对象的键。

var array = [1]Object.defineProperty(array, 1, {get() {},
})Object.getOwnPropertyDescriptors(array)
// {//   0: {//     configurable: true,
//     enumerable: true,
//     value: 1,
//     writable: true,
//   },
//   1: {//     configurable: false,
//     enumerable: false,
//     get: f get(),
//     set: undefined,
//   },
//   length: {//     configurable: false,
//     enumerable: false,
//     value: 2,
//     writable: true,
//   },
// }

preventExtensions

preventExtensions作用的数组不能添加元素，也不能修改原型的指向。

var array = [1, 2]Object.preventExtensions(array)array.push(3) // Uncaught TypeError: Cannot add property 2, object is not extensible at Array.push (<anonymous>)

seal

seal与对象类似，除了有preventExtensions特性外，也不能删除元素等。

var array = [1]Object.seal(array)array.pop() // Uncaught TypeError: Cannot delete property '0' of [object Array] at Array.pop (<anonymous>)

freeze

freeze也于对象类似，除了有preventExtensions和seal特性外，也不能修改元素。

非严格模式修改元素静默失败，严格模式将抛出错误。

'use strict'var array = [1]Object.freeze(array)array[0] = 2 // index.html:23 Uncaught TypeError: Cannot assign to read only property '0' of object '[object Array]'array // [1]

小结

preventExtensions会将对象变为不可拓展，即不能添加属性，也不能修改原型的指向
seal封闭对象，不仅会将对象变为不可拓展，还会将所有属性的描述符中的configurable置为false。所以除了有preventExtensions的特性外，也不能删除属性，不能修改除了writable和value之外的键，writable只能修改为false
freeze冻结对象，不仅会将对象变为不可拓展和封闭，还会将所有属性的数据描述符的writable置为false。所以除了有preventExtensions和seal特性外，不能修改属性和任何描述符的键值
数组是特殊的对象，preventExtensions、seal和freeze作用数组时，与作用对象的特性高度相似

preventExtensions、seal和freeze均是不可逆的，并浅作用于对象或数组

特性表。

特性	`preventExtensions`	`seal`	`freeze`
`isExtensible`	`false`	`false`	`false`
`isSealed`	`false`	`true`	`true`
`isFrozen`	`false`	`false`	`true`
添加属性	否	否	否
修改原型的指向	否	否	否
`configurable`置为`false`	否	是	是
是否可删除属性	是	否	否
修改描述符的键值	可修改	不能修改除了`writable`和`value`之外的键，`writable`只能修改为`false`	都不能修改
`writable`置为`false`	否	否	是

关系图。