> 웹 프론트엔드 > JS 튜토리얼 > 3분 안에 Object.defineProperty() 메서드를 이해하도록 안내합니다.

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>
로그인 후 복사

렌더링 다이어그램 표시:

[권장 학습: javascript 고급 튜토리얼]

위 내용은 3분 안에 Object.defineProperty() 메서드를 이해하도록 안내합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿