js中强大的Object.defineProperty方法,vue实现双向绑定的原理

这个方法可牛比了。这么说吧,vue.js是通过它实现双向绑定的。俗称属性拦截器。而且专门用来监控对象属性变化的Object.observe方法也被草案发起人撤回了(此方法在node环境中仍能使用)。可见defineProperty的威力之大。

看一下官方的定义:

Object.defineProperty()

方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。

语法

Object.defineProperty(obj,prop,descriptor)

参数

  • obj

  • 需要定义属性的对象。

  • prop

  • 需定义或修改的属性的名字。

  • descriptor

  • 将被定义或修改的属性的描述符。

返回值

返回传入函数的对象,即第一个参数obj

对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。描述符必须是两种形式之一;不能同时是两者。

数据描述符和存取描述符均具有以下可选键值:

  • configurable

  • 当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,也能够被删除。默认为 false

  • enumerable

  • 当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。默认为 false。

数据描述符同时具有以下可选键值:

  • value

  • 该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined

    这也就是为神马

  • writable

  • 当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。默认为 false

存取描述符(第三个参数对象)同时具有以下可选键值:

  • get

  • 一个给属性提供 getter 的方法,如果没有 getter 则为undefined。当我们读取某个属性的时候,其实是在对象内部调用了该方法,此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined

  • set

  • 一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。也就是说,当我们设置某个属性的时候,实际上是在对象的内部调用了该方法。

    要注意的一点是:在 descriptor 中不能同时设置访问器(get 和 set)和 wriable 或 value,否则会错,就是说想用 get 和 set,就不能用 writable 或 value 中的任何一个。

get和set是我们今天要重点讨论的两个方法,先看一下他们的简单实例:

var a = {};
        Object.defineProperty(a,'b',{
            set:function(newValue){
                console.log("你要赋值给我,我的新值是:"+newValue);
            },
            get:function(){
                console.log('你要取值')
                return 2;
            }
        });
        a.b = 1; //你要赋值给我,我的新值是1
        a.b;  //你要取值 2

虽然我将a.b的值设置成了1,但是因为我在get方法中始终返回了2,所以a.b的值一直是2。

那么,这就好玩儿了:我们可以在页面监听某个变量,当变量发生变化的时候,我们就更新对应的视图。由数据来驱动视图的更新,是不是很熟悉?是的,vue .js的核心思想就是这个。我们写个小例子:

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>test</title> 
 </head> 
 <body> 
 <div id="test">这是一个测试</div> 
 <script> 
 var view = document.getElementById("test"); 
 var data = {}; 
 var i=0; 
 Object.defineProperty(data, "b", { 
 set: function(newValue) { 
 //当data.b的值改变的时候更新#test的视图 
 view.textContent=newValue; 
 }, 
 get: function() { 
 } 
 }); 
 setInterval(function(){ 
 i++; 
 data["b"] = "data.b的值更新了,我要更新视图"+i; 
 },1000); 
 </script> 
 </body> 
</html>

视图的变化过程:

js中神奇的Object.defineProperty方法

最开始的视图

1秒后的视图

发布者

cylyiou

cylyiou

分享前端知识

支付宝扫码打赏微信打赏

如果文章对您有帮助,不妨移至上方按钮小额赞助我一下,让我有动力继续写出高质量的教程。

发表评论

电子邮件地址不会被公开。