经常听到使用Object.defineProperty 数据劫持,它是如何实现劫持的呢?除了数据劫持还可以做啥呢?今天,就来详细认识一下它
01
语 法
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象
语法:
Object.defineProperty(obj, prop, descriptor)
参数:
obj:需要定义属性的对象
prop:需要定义的属性
descriptor:属性的描述描述符
返回值:
返回此对象
示例代码
代码语言:javascript复制let obj = Object.create(null);
let descriptor = {
configurable:false,
writable:false,
enumerable:false,
value:'hello world'
};
Object.defineProperty(obj,'hello',descriptor);
console.log(obj.hello);//hello world
obj 和 prop 参数 没什么好说的,主要是这个descriptor(描述符)参数,可以深究的东西比较多,所以接下来细细讲一讲。
02
描述符
在JS中对象具有两种属性,分别是数据属性和访问器属性,所以其描述符也根据属性分类,分为数据描述符和访问器描述符。
在使用描述符时,必须是两种形式之一,且两者不能同时使用。
一、数据描述符
数据描述符是一个具有值的属性,该值可能是可写的,也可能是不可写的。
它具有以下可选的键值:
configurable:表示该属性能否通过delete删除,能否修改属性的特性或者能否修改访问器属性,默认为false。当且仅当该属性的configurable为true时,才能实现上述行为。
enumerable:表示该属性是否可以枚举,即可否通过for..in访问属性。默认为false。
value:表示该属性的值。可以是任何有效的JS值。默认为undefined。
writable:表示该属性的值是否可写,默认为false。当且仅当属性的writable为true时,其值才能被赋值运算符改变
示例代码:
代码语言:javascript复制let obj = {
hello:'world'
};
console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
运行结果 :
关于getOwnPropertyDescriptor方法
定义:
获取指定对象的自身属性描述符。自身属性描述符是指直接在对象上定义(而非从对象的原型继承)的描述符。
语法:
Object.getOwnPropertyDescriptor(object, propertyname)
参数:
object:必需。包含属性的对象。
propertyname:必需。属性的名称。
二、访问器描述符
访问器描述符是一个有getter-setter函数对描述的属性的读写。
它具有以下可选的键值:
configurable:表示该属性能否通过delete删除,能否修改属性的特性或者能否修改访问器属性,默认为false。当且仅当该属性的configurable为true时,才能实现上述行为。
enumerable:表示该属性是否可以枚举,即可否通过for..in访问属性。默认为false。
get:在读取属性时调用的函数,默认值为undefined
set:在写入属性时调用的函数,默认值为undefined
示例代码:
代码语言:javascript复制function Hello() {
let hello = 'hello world';
Object.defineProperty(this, 'hello', {
get(){
console.log('get');
return hello;
},
set(value){
console.log('set');
hello = value;
}
})
}
let obj = new Hello();
console.log(obj.hello);
obj.hello = 'goodbye';
console.log(obj.hello);
运行结果 :
三、注意点
数据描述符和访问器描述符不能同时使用,否则会报错。
代码语言:javascript复制function Hello() {
let hello = "hello world";
Object.defineProperty(this, 'hello', {
get(){
console.log('get');
return hello;
},
set(value){
console.log('set');
hello = value;
},
writable:true
})
}
let obj = new Hello();
运行结果 :
今日面试题:
如何实现 ( a == 1 && a == 2 && a == 3 ) 结果为true.
提示:思考如何去定义a