1. 首页
  2. SEO百科
  3. Web前端

Object.defineProperty小白帮助_object零基础入门

1. 前言想到Object.defineProperty,首先不得不提到对象,对象是JavaScript的基础,有一种常见的说法“JavaScript中万物皆是对象”。这种说法其实并不那么准确,根据 JavaScript 对语言类型的分类,就可以得出JavaScript并不是万物皆对象,这次就不对这个问题进行展开,感兴趣可以点击JavaScript 万物皆对

Object.defineProperty小白帮助

1. 前言

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

Object.defineProperty小白帮助_object零基础入门

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

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

2. 属性描述符

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

  • 数据描述符

    • 数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的
  • 访问描述符

    • 访问描述符是由getter-setter函数对描述的属性。

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

2.1 Writable

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


1
2
3
4
5
6
7
8
9
10
11
12
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()方法来修改属性描述符:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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还会禁止删除这个属性:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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循环。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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对象中。

再看一个实例:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

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

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

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
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函数,函数的返回值会被当作属性访问的返回值。


1
2
3
4
5
6
7
8
9
let myObject = {
  get a() {
    return 2
  }
}

myObject.a = 3

console.log(myObject.a) // 2

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

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


1
2
3
4
5
6
7
8
9
10
11
12
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:false和configurable:false就可以创建一个真正的常量属性,不可修改、重新定义或者删除。

3.2 禁止扩展

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


1
2
3
4
5
6
7
8
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,这样就不可修改它们的值。

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

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

海计划公众号