浅谈Object.defineProperty()
2019-03-22 本文已影响0人
夏日望天看云
-介绍
语法
Object.defineProperty(obj, prop, descriptor)
参数
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符
修饰符descriptor
- configurable
当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。 - enumerable
当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。 - value
该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。 - writable
当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。 - get
一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。
默认为 undefined。 - set
一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。
默认为 undefined。
描述符可同时具有的键值
| configurable | enumerable | value | writable | get | set | |
|---|---|---|---|---|---|---|
| 数据描述符 | Yes | Yes | Yes | Yes | No | No |
| 存取描述符 | Yes | Yes | No | No | Yes | Yes |
利用Object.defineProperty()完成一个简易的数据双向绑定
- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双向绑定</title>
</head>
<body>
<div id="box">
<input type="text" name="name" id="name" >
<div id="show">
</div>
<button id="click">点击</button>
</div>
</body>
</html>
- js代码
var data = {};
var name;
Object.defineProperty(data, "show", {
configurable: true,
enumerable: true,
set: function (newvalue) {
name = newvalue;
},
get: function () {
return name;
}
})
document.querySelector("#name").addEventListener("input", function () {
// 改变name的值
name = this.value;
document.querySelector("#show").innerHTML = data.show;
})
document.querySelector("#click").addEventListener("click", function () {
// 改变data.show的值
data.show = "我自己设置的";
document.querySelector("#show").innerHTML = name;
document.querySelector("#name").value = name;
})
效果图
效果.gif
