Object.defineProperty()的理解

内容简介：-configurable属性：

1.Object.defineProperty

Object.defineProperty(obj, prop, descriptor)

MDN描述：
obj要在其上定义属性的对象。
prop要定义或修改的属性的名称。
descriptor将被定义或修改的属性描述符。

writable属性：
是否可以被重写：默认值为true 当属性值为false时，修改无效;

当writable属性值为false，对prop做出修改是在严格模式下会报错;

-configurable属性：

对象的属性是否可以被删除，以及除value和writable特性外的其他特性是否可以被修改；

enumberable 是否可以被枚举，for in 或者 Object.keys()
set 和 get 属性默认为undefined

直接声明和用Object.defineProperty()的区别

let obj = {
   a: 12  // 其他的属性都为true
 }
 Object.defineProperty(obj, 'b', {
   value: 15 //其他的属性都为false
 })

实现简易的双向绑定：

<body>
 <input type="text" name='' value="" id="ipt">
 您输入的值是<span id='txt'></span>

</body>

window.onload = () => {
   const obj = {}
   Object.defineProperty(obj, 'text', {
     get() {
       return text
     },
     set(newVal) {
       document.getElementById('ipt').value = newVal
       document.getElementById('txt').innerHTML = newVal
     }
   })
   let input = document.getElementById('ipt')
   input.addEventListener('keyup', (e) => {
     obj.text = e.target.value
   })
 }

2.Vue双向绑定的原理

vue数据双向绑定的原理：数据劫持加发布订阅者的模式，针对对象或者对象属性的一些变化，通知订阅者，通过Compile来解析编译模板指令，再通过watcher进行数据的更新渲染。
Vue中Object.defineProperty()的缺点：

不能监听数组的变化：当你利用索引设置一个元素，或者修改数组长度这些操作并不是响应式的；
展望ES6的新特性Proxy
```
let p = new Proxy(target, handler)
```
通俗的理解，在对象之前设一层拦截，要对目标对象做的相应的处理，必须通过这层拦截，他可以对外部的处理做一些过滤和操作；

proxy的优点有多达13种数据劫持的方法，缺点就是兼容性问题。

参考： vue3.0 尝鲜 -- 摒弃 Object.defineProperty，基于 Proxy 的观察者机制探索
实现双向绑定Proxy比defineproperty优劣如何

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

重构（影印版）

Martin Fowler / 中国电力出版社 / 2003-7-1 / 49.00元

随着对象技术应用越来越普及，软件开发社区出现了一个新的问题。缺乏经验的开发者编写出了大批设计较差的程序，导致这些应用程序非常低效，且难于维护和扩展。本书除了讨论重构的各种技巧之外，还提供了超过70个可行重构的详细编目，对如何应用它们给出了有用的提示；并以step by step的形式给出了应用每一种重构的指南；而且用实例展示了重构的工作原理。这些示例都是用Java语言写成的，但其中的思想却可以运用......一起来看看《重构（影印版）》这本书的介绍吧!

码农工具

Object.defineProperty()的理解

1.Object.defineProperty

2.Vue双向绑定的原理

重构（影印版）

html转js在线工具

RGB CMYK 转换工具

HEX CMYK 转换工具