理解Object.defineProperty方法

最新推荐文章于 2023-02-14 16:59:02 发布

bug收集

最新推荐文章于 2023-02-14 16:59:02 发布

阅读量207

点赞数

分类专栏： javascript 文章标签： javascript es6

本文链接：https://blog.csdn.net/yangyangkl123/article/details/113625196

版权

javascript 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

经常听到使用Object.defineProperty 数据劫持，它是如何实现劫持的呢？除了数据劫持还可以做啥呢？

今天，就来详细认识一下它

01 语法

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

语法：

Object.defineProperty(obj, prop, descriptor)

参数：

obj：需要定义属性的对象

prop：需要定义的属性

descriptor：属性的描述描述符

返回值：

返回此对象

示例代码

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时，其值才能被赋值运算符改变

示例代码：

let obj = {
    hello:'world'
};

console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));

运行结果：

在这里插入图片描述

关于getOwnPropertyDescriptor方法

定义：

获取指定对象的自身属性描述符。自身属性描述符是指直接在对象上定义（而非从对象的原型继承）的描述符。

语法：

Object.getOwnPropertyDescriptor(object, propertyname)

参数：

object：必需。包含属性的对象。

propertyname：必需。属性的名称。

二、访问器描述符

访问器描述符是一个有getter-setter函数对描述的属性的读写。

它具有以下可选的键值：

enumerable：表示该属性是否可以枚举，即可否通过for…in访问属性。默认为false。

get：在读取属性时调用的函数，默认值为undefined

set：在写入属性时调用的函数，默认值为undefined

示例代码：

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);

运行结果：

在这里插入图片描述

三、注意点

数据描述符和访问器描述符不能同时使用，否则会报错。

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();