首頁 > 文章 > web前端 > 三分鐘帶你去了解Object.defineProperty()方法

三分鐘帶你去了解Object.defineProperty()方法

醉折花枝作酒筹轉載: 2021-04-23 09:11:311868瀏覽

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

JavaScript Object 回调函数对象

陳述：

本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除

上一篇：javascript如何利用sum函數求和下一篇：javascript如何利用sum函數求和

看更多