Rumah > Artikel > hujung hadapan web > 三分钟带你了解Object.defineProperty()方法
三分钟带你了解Object.defineProperty()方法
- 醉折花枝作酒筹ke hadapan
- 2021-04-23 09:11:311910semak imbas
本篇文章给大家详细介绍一下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高级教程】
Atas ialah kandungan terperinci 三分钟带你了解Object.defineProperty()方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：javascript如何利用sum函数求和Artikel seterusnya：socket.io如何即时通信前端配合Node