首页 > 编程知识 正文

objectdefineproperty是什么,object defineproperty有什么用

时间:2023-05-05 07:51:44 阅读:226345 作者:2187

    之前没怎么对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(描述符)参数,可以深究的东西比较多,所以接下来细细讲一讲。

二、描述符

    在JS中对象具有两种属性,分别是数据属性和访问器属性,所以其描述符也根据属性分类,分为数据描述符和访问器描述符。

在使用描述符时,必须是两种形式之一,且两者不能同时使用。

2.1 数据描述符

    数据描述符是一个具有值的属性,该值可能是可写的,也可能是不可写的。

    它具有以下可选的键值:

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

    运行结果:


2.2 访问器描述符

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

    它具有以下可选的键值:

    configurable:表示该属性能否通过delete删除,能否修改属性的特性或者能否修改访问器属性,默认为false。当且仅当该属性的configurable为true时,才能实现上述行为。

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

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

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

    [举个例子]

let obj = { _hello:'hello world' //表示私有变量};Object.defineProperty(obj,'hello',{ get() { console.log('get'); return this._hello; }, set:function (value) { console.log('set'); this._hello = value; }});console.log(obj.hello);obj.hello = 'goodbye';console.log(obj.hello);    

    执行结果:


    在这个例子中,_hello和hello属性的值绑定了,即obj.hello = obj._hello,除非重新定义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; } })}let obj = new Hello();console.log(obj.hello);obj.hello = 'goodbye';console.log(obj.hello);    

    从本质上来讲两种方式没区别,之所以这个例子看上去比较优雅,是因为采用了闭包的思想,隐藏了他们访问的都是同一块内存区域的本质。

2.3 注意点

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

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

    执行结果:


三、瞎联想

    主要这个东西让我想到了ES6中提出的Proxy(代理对象),它同样也起到了属性拦截器的作用,但是功能更强大,这里也举个例子。

let obj = { hello:'hello world' };let proxy = new Proxy(obj, { get(target, property) { console.log('get'); return target[property]; }, set(target,property,value) { console.log('set'); target[property] = value; }});console.log(proxy.hello);proxy.hello = 'goodbye';console.log(proxy.hello);    执行后的输出结果和上面通过设置属性的访问器描述符的结果一样。而且从代码上看,区别也不是很大,所以Proxy相当于访问器描述符的加强版吧,我是这么觉得的。(感觉我在这地方说法可能有问题,希望有优雅的冬瓜指点一下)
四、应用

    鼎鼎有名的Vue.js实现数据双向绑定的原理就是用的Object.defineProperty,这里不细讲,但是推荐一篇文章剖析Vue原理&实现双向绑定MVVM,里面讲的挺细的。

    然后这里提供一个极简的数据双向绑定的例子,取自面试官: 实现双向绑定Proxy比defineproperty优劣如何?

const obj = {};Object.defineProperty(obj, 'text', { get() { console.log('get val'); }, set(newVal) { console.log('set val:' + newVal); document.getElementById('input').value = newVal; document.getElementById('span').innerHTML = newVal; }});const input = document.getElementById('input');input.addEventListener('keyup', function(e){ obj.text = e.target.value;});

    当输入框改变时,页面显示也会改变。只是示例,并没有啥大用处。

五、推荐链接

    1.剖析Vue原理&实现双向绑定MVVM

    2.面试官: 实现双向绑定Proxy比defineproperty优劣如何?

    3.https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。