阅读 541

你真的了解Object.defineProperty吗

1. 前言

想到Object.defineProperty,首先不得不提到对象,对象是JavaScript的基础,有一种常见的说法“JavaScript中万物皆是对象”。

这种说法其实并不那么准确,根据 JavaScript 对语言类型的分类,就可以得出JavaScript并不是万物皆对象,这次就不对这个问题进行展开,感兴趣可以点击JavaScript 万物皆对象🤔。但是足以证明对象对于JavaScript这门语言的重要性。

Object.defineProperty这个方法最常用的场景应该是在面试的时候,每当面试官问起Vue双向绑定的原理,很多朋友可能破口而出就是这个方法,好了不开玩笑了,进入正题。

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

该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的,能够在属性枚举期间呈现出来(for...inObject.keys方法),这些属性的值可以被改变,也可以被删除。这个方法允许修改默认的额外选项(或配置)。默认情况下,使用 Object.defineProperty() 添加的属性值是不可修改的

以上是MDN对于这个方法的描述

2. 属性描述符

在ES5之前,JavaScript语言本身并没有提供可以直接检测属性特性的方法,但是从ES5开始,所有的属性都具备了属性描述符,有两种主要形式:

  • 数据描述符
    • 数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的
  • 访问描述符
    • 访问描述符是由getter-setter函数对描述的属性。

描述符必须是这两种形式之一,不能同时是两者,为什么后面会具体讨论。

2.1 Writable

writable决定是否可以修改属性的值。

let myObject = {}

Object.defineProperty(myObject, 'a', {
    value: 2,
    writable: false, // 不可写
    configurable: true,
    enumerable: true
})

myObject.a = 3

console.log(myObject.a) // 2
复制代码

如果在严格模式下,会抛出TypeError错误表示我们无法修改一个不可写的属性。

2.2 Configurable

Configurable决定对象属性是否可配置,只要属性是可配置的,就可以使用defineProperty()方法来修改属性描述符:

let myObject = {
  a: 2
}

myObject.a = 3
console.log(myObject.a) // 3

Object.defineProperty(myObject, 'a', {
  value: 4,
  writable: true,
  configurable: false, // 不可配置
  enumerable: true
})

console.log(myObject.a) // 4
myObject.a = 5
console.log(myObject.a) // 5

Object.defineProperty(myObject, 'a', {
  value: 4,
  writable: true,
  configurable: true, // 修改为可配置
  enumerable: true
}) // TypeError
复制代码

不管是不是处于严格模式,尝试修改一个不可配置的描述符都会抛出错误,如你所见,把configurable修改成false是一个单向操作,无法撤销!

有一个小小的例外,即使configurable: false,我们还是可以把writable的状态由true改为false,但是无法由false改为true

除了无法修改,configurable: false还会禁止删除这个属性:

let myObject = {
  a: 2
}

console.log(myObject.a) // 2
delete myObject.a
console.log(myObject.a) // undefined

Object.defineProperty(myObject, 'a', {
  value: 2,
  writable: true,
  configurable: false, // 不可配置
  enumerable: true
})

console.log(myObject.a) // 2
delete myObject.a
console.log(myObject.a) // 2
复制代码

最后一个delete语句失败了,因为属性不可配置。

2.3 Enumerable

从名字就可以看出,这个描述符控制的是属性是否出现在对象的属性枚举中,比如for...in循环。

let myObject = {
  a: 2
}

Object.defineProperty(myObject, 'a', {
  value: 2,
  enumerable: true // 可枚举
})

Object.defineProperty(myObject, 'b', {
  value: 2,
  enumerable: false // 不可枚举
})

console.log(myObject.b) // 3
console.log('b' in myObject) // true
console.log(myObject.hasOwnProperty('b')) // true

for (var k in myObject) {
  console.log(k, myObject[k])
} // 'a' 2
复制代码

可以看到,myObject.b确实存在并且有访问值,但是却不会for...in循环中,尽管它确实存在于myObject对象中。

inhasOwnProperty的区别在于是否查找[[Prototype]]链,in会沿着原型链往上查找

再看一个实例:

let myObject = {
  a: 2
}

Object.defineProperty(myObject, 'a', {
  value: 2,
  enumerable: true // 可枚举
})

Object.defineProperty(myObject, 'b', {
  value: 2,
  enumerable: false // 不可枚举
})

console.log(myObject.propertyIsEnumerable('a')) // true
console.log(myObject.propertyIsEnumerable('b')) // false

console.log(Object.keys(myObject)) // ['a']
console.log(Object.getOwnPropertyNames(myObject)) // ['a', 'b']
复制代码

propertyIsEnumerable()会检查给定的属性名是否直接存在于对象中,并且满足enumerable: true

Object.keys()会返回一个数组,包含所有的可枚举属性。Object.getOwnPropertyNames()也会返回一个数组,包含所有属性,无论它们是否可枚举,这两个方法都只会查找对象直接包含的属性。

2.4 Getter和Setter

gettersetter可以改写默认操作,但是只能应用在单个属性上,无法应用在整个对象,gettersetter都是隐藏函数,getter会在获取属性值时调用,setter会在设置属性值时调用。比如Vue就会给所有的属性添加上gettersetter函数。

当你给一个属性定义gettersetter或者两者都有时,这个属性会被定义为“访问描述符”(和“数据描述符”相对)。

对于访问描述符来说,JavaScript会忽略它们的valuewritable特性,取而代之的是关心setget(还有configurableenumerable)特性。这就是为什么数据描述符和访问描述符只会存在一个的原因。

let myObject = {
  get a() {
    return 2
  }
}

Object.defineProperty(myObject, 'b', {
  get: function () {
    return this.a * 2
  }
})

console.log(myObject.a) // 2
console.log(myObject.b) // 4
复制代码

我通过两种方式创建了两个不包含值的属性,但是在访问这两个属性的时候,它们都会自动调用一个隐藏的get函数,函数的返回值会被当作属性访问的返回值。

let myObject = {
  get a() {
    return 2
  }
}

myObject.a = 3

console.log(myObject.a) // 2
复制代码

由于定义了a属性的getter,所以对a的值进行设置时set操作会忽略赋值操作。而且即便有合法的setter,由于我们自定义的getter只会返回2,所以set操作时没有意义的。

通常,gettersetter时成对出现的(只定义一个的话通常会产生意料之外的行为):

let myObject = {
  get a() {
    return this._a_
  }, // 给a定义一个getter
  set a(val) {
    this._a_ = val * 2
  } // 给a定义一个setter
}

myObject.a = 2

console.log(myObject.a) // 4
复制代码

当对目标对象的属性设置了writable:false,相当于你定义了一个空操作setter,你的所有set操作都会被忽略。

3. 补充(对象的不变性)

有时候你会希望属性或者对象是不可改变的,在ES5中有很多方法可以实现。很重要的一点,所有的方法创建的都是浅不可变性,也就是说,它们只会影响目标对象和它的直接属性,如果目标对象引用了其他对象,其他对象的内容仍然是可变的。

3.1 对象常量

结合writable:falseconfigurable:false就可以创建一个真正的常量属性,不可修改、重新定义或者删除。

3.2 禁止扩展

如果你希望得到一个对象,它禁止添加新属性并且保留已有属性,可以使用Object.preventExtensions():

let myObject = {
  a: 2
}

Object.preventExtensions(myObject)

myObject.b = 3
console.log(myObject.b) // undefined
复制代码

3.3 密封

Object.seal()会创建一个“密封”的对象,这个方法实际上会在一个现有对象上调用Object.preventExtensions()并把所有现有属性标记为configurable:false

密封之后不仅不能添加新属性,也不能重新配置或者删除任何现有属性,但是可以修改属性的值。

3.4 冻结

Object.freeze()会创建一个冻结对象,这个方法实际上会在一个现有对象上调用Object.seal()并把所有“数据访问”属性标记为writable:false,这样就不可修改它们的值。

这个方法是可以应用在对象上的级别最高的不可变性,它会禁止对于对象本身及其任意直接属性的修改。

以上的几个方法都要慎用,很有可能带来意想不到的行为。

4. 参考

  • 《你不知道的JavaScript(上卷)》第二部分第三章:对象

5. 最后

文中如果有问题和遗漏,欢迎在评论区指出,如果本文能给帮助到你,请给个点赞👍和关注

本文到此结束,886🚀🚀

关注下面的标签,发现更多相似文章
评论