3분 안에 Object.defineProperty() 메서드를 이해하도록 안내합니다.-JS 튜토리얼-php.cn

3분 안에 Object.defineProperty() 메서드를 이해하도록 안내합니다.

醉折花枝作酒筹

풀어 주다： 2021-04-23 09:11:31

앞으로

1946명이 탐색했습니다.

이 글에서는 Object.defineProperty() 메소드에 대해 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

3분 안에 Object.defineProperty() 메서드를 이해하도록 안내합니다.

Syntax

Object.defineProperty(obj, prop, descriptor)

Definition

객체에 새 속성을 정의하면 원래 속성을 수정할 수 있습니다!

Parameters

obj 대상 개체.

prop 정의되거나 수정된 속성의 이름입니다.

descriptor 속성 설명자가 정의되거나 수정되었습니다. (value, writable, get, set 값은 동시에 설정할 수 없습니다)

Property descriptor

configurable: Boolean --> configurable 여부

enumerable: Boolean -- > 열거 가능 여부

값: 기본값

쓰기 가능: Boolean --> 다시 쓸 수 있는지 여부

/Access(액세스) 설명자

get //콜백 함수가 해당 값을 동적으로 계산합니다. 다른 속성을 기반으로 한 현재 속성

set / /콜백 함수는 현재 속성 값이 변경되었는지 모니터링한 후 다른 관련 속성을 업데이트합니다

Return value

연산된 객체, 즉 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>

로그인 후 복사

렌더링 다이어그램 표시: