语法
Object.defineProperty(obj, prop, descriptor)
定义
在对象上定义一个新属性,可以修改原有的属性!
参数
obj 目标对象。
prop 定义或修改的属性的名字。
descriptor 定义或修改的属性描述符。(不能同时设置value、writable 与 get、set的值)
属性描述符
configurable: 布尔 --> 是否可配置
enumerable: 布尔 --> 是否可枚举
value: 默认值
writable: 布尔 --> 是否可重写
/访问(存取)描述符
get //回调函数 根据其他属性,动态计算当前属性的值
set //回调函数 监听当前属性值是否发生改变 然后更新其他相关属性
返回值
返回被操作的对象,即返回 obj 参数
以下代码是简单实现数据双向绑定:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="ipt" />
<p id="lc"></p>
</body>
</html>
<script>
//获取页面元素
var ipt = document.getElementById("ipt");
var ps = document.getElementById("lc");
var obj = { name: "" };
Object.defineProperty(obj, "name", {
get() {
return ipt.value;
},
set(newval) {
ipt.value = newval;
ps.innerHTML = newval;
},
});
ipt.addEventListener("keyup", function() {
ps.innerHTML = ipt.value; //数据赋值
});
</script>
效果图展示: