這篇文章要為大家詳細介紹一下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中文網其他相關文章！
