1. 功能
Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
2. 语法
Object.defineProperty(obj, prop, descriptor)
1. 参数
obj:要定义属性的对象。prop:要定义或修改的属性的名称或Symbol。descriptor:配置项,需传一个对象,该对象有如下属性:
value:该属性对应的值,可以是任何有效值(数值,对象,函数等),默认是undefinedwritable:控制属性是否可以被修改,默认值是falseconfigurable:控制属性是否可以被删除,默认值是falseenumerable:控制属性是否可以枚举,默认值是falseget:当读取属性prop时,getter就会被调用,且返回值就是属性prop的值。若没有getter,默认是undefinedset:当修改属性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,都会调用一次setter函数,通过setter函数来改变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
📘📘欢迎在我的博客上访问: https://lzxjack.top/
|