理解 JavaScript 中的对象属性——数据属性与访问器属性

在 JavaScript 中，对象是一组属性的无序集合，由键值对组成。创建对象共有两种方式：字面量和 new。一般开发中为了方便通常使用字面量来创建对象。

对象中的属性有一些内部特性，这些内部特性的名称会用两个中括号括起来，如 [[Enumerable]]，根据内部特性的不同，可以将属性分为数据属性和访问器属性。

数据属性

数据属性，顾名思义，它是包含一个值的属性，数据属性一共以下四个特性：

• [[configurable]]：属性是否可配置：是否可以 delete 删除，是否可以修改特性，以及是否可以改成访问器属性。默认为 true。
• [[enumerable]]：属性是否可以枚举（使用 for-in）。默认为 true。
• [[writable]]：属性的值是否可以被修改。默认为 true。
• [[value]]：属性的值。默认为 undefined。

使用字面量或 new 操作符定义对象时，默认就是一个数据属性。前三个特性都默认为 true，而 [[value]] 则为指定的值。

可以使用 Object.getOwnPropertyDescriptor() 查看属性的描述符，他接收两个参数，第一个参数为对象，第二个参数为需要查看描述符的属性。

const o = { name: "wang" }

console.log(Object.getOwnPropertyDescriptor(o, "name"))
// {
// value: 'wang',
// writable: true,
// enumerable: true,
// configurable: true
// } 
1
2
3
4
5
6
7
8
9

另外除了使用字面量声明属性，还可以通过 Object.defineProperty() 定义属性，同时定义多个属性则可以使用 Object.defineProperties()，

在调用 Object.defineProperty() 时，configurable、enumerable 和 writable 的值如果不指定，则都默认为 false。 在严格模式下，尝试删除不可配置属性会抛出错误，尝试修改只读属性也会抛出错误。

const o = {}

Object.defineProperty(o, "name", {value: "wang",
})

console.log(Object.getOwnPropertyDescriptor(o, "name"))
// {
// value: 'wang',
// writable: false,
// enumerable: false,
// configurable: false
// } 
1
2
3
4
5
6
7
8
9
10
11
12

访问器属性

访问器属性不包含值，而是有一个 getter() 函数和一个 setter() 函数。在写入访问器属性时，会调用设置（setter()）函数，在读取时，会调用获取（getter()）函数。它一共包括四种特性：

• [[configurable]]：属性是否可配置：是否可以 delete，是否可以修改特性，以及是否可以改成数据属性。默认为 true。
• [[enumerable]]：属性是否可以枚举。默认为 true。
• [[get]]：获取函数，读取属性时调用。默认为 undefined。
• [[set]]：设置函数，写入属性时调用。默认为 undefined。

访问器属性只能通过 Object.defineProperty() 或 Object.defineProperties() 定义：

在调用 Object.defineProperty() 时，configurable 和 enumerable 的值如果不指定，则都默认为 false。

// 定义一个对象，包含伪私有成员year_和公共成员edition
let book = {year_: 2017,edition: 1
}

Object.defineProperty(book, "year", {get() {return this.year_;},set(newValue) {if (newValue > 2017) {this.year_ = newValue;this.edition += newValue - 2017;}}
})

// 设置时，会调用 setter 函数
book.year = 2018
console.log(book.edition) // 2

// 读取时，会调用 getter 函数
console.log(book.year_) // 2018

// configurable 和 enumerable 的值如果不指定，则都默认为 false
console.log(Object.getOwnPropertyDescriptor(book, "year"))
// {
// get: [Function: get],
// set: [Function: set],
// enumerable: false,
// configurable: false
// } 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Vue 中的计算属性就是访问器属性中的 getter() 和 setter。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取