JavaScript define Property 속성 납 치 를 어떻게 실현 합 니까?
8408 단어 defineProperty속성납치 하 다.
define Property 는 vue 가 데이터 납 치 를 실현 하 는 핵심 으로 본 고 는 define Property 가 속성 납 치 를 어떻게 실현 하 는 지 조금씩 설명 한다.
사실 우리 의 일반적인 조작 대상 속성 방식 은 속성 을 증가 하거나 수정 할 때 모두 Object.defineProperty 를 사용 할 수 있 습 니 다.
let obj = {};
// : /
obj.a = 1;
// :
Object.defineProperty(o, "a", {
value: 1,
writable: true,
configurable: true,
enumerable: true
});
물론 예 사 롭 지 않 은 예,우 리 는 이렇게 놀 지 않 을 것 이다.너무 수다스럽다.그러나 define Property 는 대상 의 속성 을 더욱 정확하게 추가 하거나 수정 할 수 있 습 니 다.
설명자
먼저 고유 명사:설명자.
사실은 define Property 의 세 번 째 매개 변수 로 대상 입 니 다.이 대상 의 속성 은 다음 과 같 습 니 다:
조심해!!!
세 번 묵독 하고 외우다.
get 과 set 의 예 를 써 서 이 해 를 보조 합 니 다.
이 예 는 반드시 파악 해 야 한다.이해 한 후에 데이터 납치 의 정 수 를 기본적으로 파악 했다.
let obj = {};
let value = 1;
Object.defineProperty(obj, "b", {
get() {
console.log(" b ", value);
return value;
},
set(newValue) {
console.log(" b ", newValue);
value = newValue;
}
});
// get ,get
// 1
console.log(obj.b);
// set ,value 2, !!!, ,
obj.b = 2;
// , , get , ,
console.log(obj.b);
여기에 구덩이 가 있 습 니 다.get 에 서 는 읽 기 동작 이 있 을 수 없습니다.그렇지 않 으 면 계속 순환 하기 때문에 get set 에 사용 하려 면 변 수 를 빌려 야 합 니 다.따라서 여기 서 변수 value 의 값 은 속성의 값 입 니 다.속성 을 수정 하려 면 value 의 값 을 수정 하면 됩 니 다.
이 예 는 get,set 의 정 수 를 알 게 되 었 으 니 나 도 별로 차이 가 없다 고 생각한다.
납치 대상 의 어떤 속성
방금 예 를 들 어 납치 대상 의 임의의 속성 을 써 보 세 요.
function observeKey(obj, key) {
let value = obj[key];
Object.defineProperty(obj, key, {
get() {
console.log(" ", value);
return value;
},
set(newValue) {
console.log(" ", newValue);
value = newValue;
}
});
}
let obj = { a: 1 };
observeKey(obj, "a");
// a, get
console.log(obj.a);
// a, set
obj.a = 1;
납치 대상 의 모든 속성납치 대상 의 모든 속성 을 다시 시도 해 보 세 요.
사실은 옮 겨 다 니 는 것 이다.
function observeObj(obj) {
for (let key in obj) {
// obj.hasOwnProperty
if (Object.prototype.hasOwnProperty.call(obj, key)) {
observeKey(obj, key);
}
}
return obj;
}
function observeKey(obj, key) {
let value = obj[key];
Object.defineProperty(obj, key, {
get() {
console.log(" ", value);
return value;
},
set(newValue) {
console.log(" ", newValue);
value = newValue;
}
});
}
let obj = { a: 1, b: 2 };
observeObj(obj);
console.log(obj);
// a, get
console.log(obj.a);
// a, set
obj.a = 1;
납치 대상 의 모든 속성-대상 유형의 속성 치 포함위의 결함 이 있 습 니 다.속성 값 이 대상 일 때 속성 값 을 납치 할 수 없습니다.예 를 들 어{a:1,c:{b:1}}
간단 하 다
function observeObj(obj) {
// , ,
if (typeof obj !== "object" || obj == null) {
return;
}
for (let key in obj) {
// obj.hasOwnProperty
if (Object.prototype.hasOwnProperty.call(obj, key)) {
observeKey(obj, key);
// , ,
observeObj(obj[key]);
}
}
return obj;
}
function observeKey(obj, key) {
let value = obj[key];
Object.defineProperty(obj, key, {
get() {
console.log(" ", value);
return value;
},
set(newValue) {
console.log(" ", newValue);
value = newValue;
}
});
}
let obj = { a: 1, b: 2, c: { name: "c" } };
observeObj(obj);
console.log(obj);
// a, get
console.log(obj.a);
// a, set
obj.a = 1;
// set
obj.c.name = "d";
observeObj 라 는 함 수 는 납치 대상 의 추가 속성 을 증가 할 수 없고 납치 대상 의 기 존 속성 만 있 습 니 다.define Property 의 결함
이상 의 결함 도 vue 에 왜$set/$delete 가 있 는 지,그리고 배열 에 대해 서 는 특정한 방법 만 사용 해 야 감지 할 수 있 습 니 다.
let obj = { a: 1, b: [1, 2] };
observeObj(obj);
//
obj.c = 3;
// get
console.log(obj.c);
// set
obj.b.push(3);
define Property 속성 마 운 트 가능사실은 options.data.name 에 접근 하면 options.name,전문 화 술 로 간략화 하여 data 의 속성 을 options 에 마 운 트 할 수 있 습 니 다.
define Property 를 사용 하여 options 에 새로운 속성 을 추가 하 는 것 과 같 습 니 다.
//
// options.data source options target
function proxyKey(target, source, key) {
Object.defineProperty(target, key, {
// source[key] value,
get() {
return source[key];
},
set(newValue) {
if (newValue === source[key]) {
return;
}
source[key] = newValue;
}
});
}
// ,
function proxyObj(target, source) {
for (let key in source) {
// obj.hasOwnProperty
if (Object.prototype.hasOwnProperty.call(source, key)) {
proxyKey(target, source, key);
}
}
}
let options = {
data: { name: 1 }
};
proxyObj(options, options.data);
// 1
console.log(options.name);
vue 의 속성 납치 와 마 운 트 속성 은 핵심 원리 차이 가 많 지 않 은 것 이 바로 위 에 있다.define Property 로그 도 쓸 수 있어 요.
예 를 들 어 obj 에 속성 이 있 습 니 다.이 속성 값 은 자주 변 합 니 다.모든 변 화 된 값 을 기록 하려 면 로 그 를 만 들 수 있 습 니 다.
let obj = { a: 1 };
let log = [obj.a];
let value = obj.a;
Object.defineProperty(obj, "a", {
get() {
return value;
},
set(newValue) {
if (newValue === value) {
return;
}
value = newValue;
log.push(newValue);
}
});
obj.a = 2;
obj.a = 3;
obj.a = 4;
// [1,2,3,4]
console.log(log);
통용 되 는 것 은 하나의 종 류 를 추출 하여 특정한 값 의 변 화 를 전문 적 으로 기록 할 수 있다.
class Archiver {
constructor() {
let value = null;
this.archive = [];
Object.defineProperty(this, "a", {
get() {
return value;
},
set(newValue) {
if (newValue === value) {
return;
}
value = newValue;
this.archive.push(newValue);
}
});
}
}
let archiver = new Archiver();
archiver.a = 1;
archiver.a = 2;
// [1,2]
console.log(archiver.archive);
인용 하 다.MDN 의 define Property
총결산
자 바스 크 립 트 define Property 가 속성 납 치 를 어떻게 실현 하 는 지 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 define Property 속성 납치 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
C# PowerPoint 파일의 속성 설정 및 로드PowerPoint 파일의 속성은 파일의 내용을 나타내며 해당 파일을 식별하기위한 것입니다. 문서의 속성에는 제목, 작성자 이름, 제목 등 외에도 문서의 주제와 내용을 식별하는 키워드가 있습니다. 이 기사에서는 Sp...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.