JavaScript中的Object.defineProperty()方法

1. 功能

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

2. 语法

Object.defineProperty(obj, prop, descriptor)

1. 参数

• obj：要定义属性的对象。
• prop：要定义或修改的属性的名称或Symbol。
• descriptor：配置项，需传一个对象，该对象有如下属性：
  • value：该属性对应的值，可以是任何有效值（数值，对象，函数等），默认是undefined
  • writable：控制属性是否可以被修改，默认值是false
  • configurable：控制属性是否可以被删除，默认值是false
  • enumerable：控制属性是否可以枚举，默认值是false
  • get：当读取属性prop时，getter就会被调用，且返回值就是属性prop的值。若没有getter，默认是undefined
  • set：当修改属性prop时，setter就会被调用，且函数参数是修改的具体值。若没有setter，默认是undefined

2. 返回值

该方法返回被传递给函数的对象。

3. 应用举例

在浏览器环境中，如何使下面的if语句成立？

if (a === 1 && a === 2 && a === 3) {
    console.log(true);
}

第一次看到这题，感觉不可能实现，一个变量怎么可能即等于1，又等于2，也等于3呢？

稍作分析可以看到，if中的判断语句，实际上读取了3次变量a的值，所以可以使用Object.defineProperty()方法来解决这个问题。

在浏览器环境中，将变量a定义在window上，每次读取变量a，都会调用一次getter函数，通过getter函数来改变a的值。

具体见如下代码：

let number = 0;
Object.defineProperty(window, 'a', {
    get() {
        number++;
        return number;
    },
});

if (a === 1 && a === 2 && a === 3) {
    console.log(true);
}

将变量a定义在window上，定义一个变量number，setter函数中，将number自增，并返回number。这样每次读取变量a时，自动调用setter函数，a的值也会自动发生变化。浏览器控制台会输出true。

---

参考：

Object.defineProperty() —— MDN