3분 안에 Object.defineProperty() 메서드를 이해하도록 안내합니다.
- 醉折花枝作酒筹앞으로
- 2021-04-23 09:11:311930검색
이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!