解析Object.defineProperty的作用

最新推荐文章于 2024-10-11 17:39:47 发布

weixin_30929295

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yscode/p/9821690.html

版权

vue.js的双向数据绑定就是通过Object.defineProperty方法实现的，俗称属性拦截器。
接下来看一下Object.defineProperty使用方式：
Object.defineProperty(obj, prop, descriptor)
obj：必需。目标对象 
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性
当修改或定义对象的某个属性的时候，给这个属性添加一些特性：
一、访问器属性
访问器属性是对象中的一种特殊属性，它不能直接在对象中设置，而必须通过 defineProperty() 方法单独定义。
var obj = { };
为obj定义一个名为 hello 的访问器属性
Object.defineProperty(obj, "hello", {
　　get: function () {return sth},
　　set: function (val) { do sth;}
})
 obj.hello 可以像普通属性一样读取访问器属性
访问器属性的"值"比较特殊，读取或设置访问器属性的值，实际上是调用其内部特性：get和set函数。
obj.hello 读取属性，就是调用get函数并返回get函数的返回值
obj.hello = "abc" 为属性赋值，就是调用set函数，赋值其实是传参
get 和 set 方法内部的 this 都指向 obj，这意味着 get 和 set 函数可以操作对象内部的值。另外，访问器属性的会"覆盖"同名的普通属性，因为访问器属性会被优先访问，与其同名的普通属性则会被忽略。
实例：
HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
　　<input type="text" id="input"/>
　　<span id="binding"></span>
</body>
</html>
JS：
var obj = {};
Object.defineProperty(obj,'hello',{
　　set:function(val){
    　　document.getElementById('binding').innerHTML = val;
   　　 document.getElementById('input').value = val;
　　}
});
document.getElementById('input').οninput=function(e){
      obj.hello = e.target.value;
}
obj.hello = "";