defineProperty详解

搁置了几天我还是决定再次重写！

下边我们来具体聊聊先从defineProperty开始说起

//对你没看错defineProperty有这个功能，不知可以定义新的属性还可以修改，这么逆天难用的功能为什么还要造出来？说这个有什么用？别急往下看

先做了介绍我们下边来证明下

//configurable 这个比较厉害 控制descriptor内属性都不可改变不知道是不是真的

//还是这个栗子

对否可枚举

接了下来说到重点： set和get这也是vue3.0前observe的实现原理

知道用法了我们来实践一下

效果：

1、input输入改变div内容

2、改变obj name属性

简单的用defineProperty实现了双向绑定

欢迎吐槽！您的点赞是我继续的动力！谢谢

defineProperty

首先需要声明的是这个是ES5的特性，兼容大多数浏览器，除了ie8仍旧是被嫌弃的存在

Object.defineProperty ，顾名思义，为对象定义属性。在js中我们可以通过下面这几种方法定义属性

Object的 defineProperty 和 defineProperties 这两个方法在主要功能就是用来定义或修改对象的内部属性,与之相对应的 getOwnPropertyDescriptor 和 getOwnPropertyDescriptors 就是获取对象的内部属性的描述。

默认值false，表示能否通过delete删除此属性, 能否修改属性的特性，或能否修改把属性修改为访问器属性。

ps：如果直接使用字面量定义对象，默认值为true

默认值false，表示该属性是否可枚举，即是否通过for-in循环或Object.keys()返回属性。

ps:如果直接使用字面量定义对象，默认值为true

默认值false，能否修改属性的值。

ps:如果直接使用字面量定义对象，默认值为true

默认值undefined，表示该属性的值

同上

同上

默认值undefined，一个给属性提供 getter 的方法(访问对象属性时调用的函数,返回值就是当前属性的值)，如果没有 getter 则为 undefined。该方法返回值被用作属性值

默认值undefined，一个给属性提供 setter 的方法(给对象属性设置值时调用的函数)，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。

Object.defineProperty()

Object.defineProperties()

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptors()

需要理解的是 设置是设置 取值是取值

利用set的方法和get的过程我们可以实行双向数据绑定

用途：set 可以优化属性设置

get可以优化输出：例如对象某些功能废弃，则可以使用get返回错误信息

Object.defineProperty()死循环的问题

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

语法：

obj :要定义属性的对象

prop :要定义或修改的属性的名称或 Symbol

descriptor :要定义或修改的属性描述符

存取描述符：

使用存取描述符遇到的问题：

当Object.defineProperty设置的prop和obj原有的prop相同时会造成死循环，如下面的initValue属性

原因：

console.log(obj.initValue) 触发get方法， return obj.initValue 再次触发get方法

obj.initValue = 'zqf' 触发set方法， obj.initValue = value 再次触发set方法

详细的说明请看 MDN文档

defineproperty怎么读

de-fine-property

de 音标

/di/

fine音标:

英[faɪn] 美[faɪn]

property音标:

英[ˈprɒpəti] 美[ˈprɑ:pərti]