详解defineProperty，并手动实现双向绑定

独孤求赞

已于 2022-03-15 16:09:00 修改

阅读量665

点赞数 2

分类专栏： js 文章标签： es6 javascript jquery vue.js

于 2020-09-28 15:28:13 首次发布

本文链接：https://blog.csdn.net/weixin_44989478/article/details/108849021

版权

js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

大家都知道vue3.0之前的双向绑定原理就是靠defineProperty()方法，那么它有什么神奇之处呢？

1.基础介绍

Object.defineProperty(obj, prop, descriptor)

1.它接受三个参数，而且都是必填的。

obj ：要定义属性的对象。目标对象
prop：第二个参数:需要定义的属性或方法的名字。
descriptor：要定义或修改的属性描述符。属性的描述对象

例:

var obj = {}
Object.defineProperty(obj,"say",{
    value:"点赞"
});
console.log( obj.say);  //'点赞'

2.descriptor

descriptor是defineProperty的第三个参数，一般被叫做属性描述对象。
取值：

Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false,
    set:function(){},
    get:function(){},
});

先介绍前四个属性。

value：属性的值。
writable：属性的值是否可以被重写。设置为true可以被重写；设置为false，不能被重写。
enumerable：此属性是否可以被枚举（使用for…in或Object.keys()）。设置为true可以被枚举；false则不能被枚举。
configurable：是否可以删除目标属性或是否可以再次修改属性的特性（writable, configurable, enumerable）。设置为true可以被删除或可以重新设置特性；设置为false，不能被可以被删除或不可以重新设置特性。

注意：如果你只设置了value和值，其他的默认的取值都是false

var a= {}
Object.defineProperty(a,"b",{
  value:123
})
console.log(a.b);//123

相当于

var a= {}
Object.defineProperty(a,"b",{
  value:123,
  writable:false,
  enumerable:false,
  configurable:false
})
console.log(a.b);//123

最后来看最关键的，也是和vue双向绑定直接相关的。

let a = {};  let c;
Object.defineProperty(a, 'b', {
   set(newVal){ console.log('设置的值是'+newVal); c=newVal  } ,
   get(){ console.log('读取了b属性的值：'); return c}
});

console.log(a.b); //读取了b属性的值： undefined
a.b=9;  //设置的值是9
console.log(a.b); //读取了b属性的值： 9

最后

用defineProperty实现双向绑定。

上代码：

<html>
<head></head>
<body>
    <input class="a"></input>
    <input class="b" type="text">
<script>

function fun(newval){
    document.querySelector('.b').value=newval;
    document.querySelector('.a').value=newval;
}

let obj={};
//defineproperty(obj,'inputVal',fun);
Object.defineProperty(obj,'inputVal',{
    set(newVal){
        val=newVal
        fun(newVal)
    },
    get(){return val}
 })
document.querySelector('.b').addEventListener('change',function(e){
    obj.inputVal=e.target.value;
});
document.querySelector('.a').addEventListener('change',function(e){
    obj.inputVal=e.target.value;
});

</script>
		
	
</body>
</html>

ok,本文到此结束。最后提醒，请看下本人的昵称

独孤求赞

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详解defineProperty，并手动实现双向绑定

大家都知道vue3.0之前的双向绑定原理就是靠defineProperty()方法，那么它有什么神奇之处呢？1.基础介绍Object.defineProperty(obj, prop, descriptor)1.它接受三个参数，而且都是必填的。obj ：要定义属性的对象。目标对象prop：第二个参数:需要定义的属性或方法的名字。descriptor：要定义或修改的属性描述符。属性的描述对象例:var obj = {}Object.defineProperty(obj,"say",{
复制链接

扫一扫