3 分で Object.defineProperty() メソッドを理解できます-jsチュートリアル-php.cn

3 分で Object.defineProperty() メソッドを理解できます

醉折花枝作酒筹

リリース： 2021-04-23 09:11:31

転載

1945 人が閲覧しました

この記事では、Object.defineProperty() メソッドについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

3 分で Object.defineProperty() メソッドを理解できます

#構文

Object.defineProperty(obj, prop, descriptor)

定義

オブジェクトに新しい属性を定義し、元の属性を変更します。

パラメータ

obj ターゲットオブジェクト。

prop 定義または変更するプロパティの名前。

descriptor 定義または変更されたプロパティ記述子。 (

value、writable、get、set の値は同時に設定できません)

属性記述子

設定可能: ブール値--> 可能ですか? Configuration

enumerable: Boolean--> 列挙可能かどうか

value: デフォルト値

writable: Boolean-->オーバーライドできるかどうか

/アクセス (アクセス) 記述子

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>

ログイン後にコピー

エフェクト画像の表示:

# #[推奨される学習: