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 ,都会调用一次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/
|