本篇文章给大家详细介绍一下Object.defineProperty()方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
语法
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>
效果图展示:
【推荐学习:javascript高级教程】
以上是三分钟带你了解Object.defineProperty()方法的详细内容。更多信息请关注PHP中文网其他相关文章!