本篇文章给大家详细介绍一下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()方法的详细内容。