독학 - js 편 - defineProperty 방법

기본 정의
The Object. defineProperty () 방법 은 새로운 속성 이 한 대상 에 직접 있 거나 기 존의 속성 을 수정 하 는 대상 을 정의 하고 이 대상 을 되 돌려 줍 니 다.
문법

Object.defineProperty(obj,prop,descriptor)

obj: 정 의 된 대상 속성.
prop: 속성의 이름 정의 또는 수정.descriptor: 이 속성 은 설명 자 를 정의 하거나 수정 합 니 다.
사용 가능 Object.defineProperty 함수 가 다음 동작 을 수행 합 니 다:

대상 에 게 새로운 속성 을 추가 합 니 다.  대상 이 지정 한 속성 이름 을 가지 고 있 지 않 을 때 이 동작 이 발생 합 니 다.  

기 존 속성의 특성 을 수정 합 니 다.  대상 이 지정 한 속성 이름 을 가지 고 있 을 때 이 동작 으로 보 냅 니 다.  

설명자 대상 에 서 는 데이터 속성 이나 접근 기 속성 을 설명 하 는 데 사용 되 는 속성 정 의 를 제공 합 니 다.  설명자 대상 은? Object.defineProperty 함수 의 매개 변수.  
대상 에 게 여러 속성 을 추가 하거나 기 존 속성 을 여러 개 수정 하려 면 사용 할 수 있 습 니 다. Object. defineProperties 함수 (JavaScript).
3. 데이터 속성 추가
다음 예제 에서 Object. defineProperty 함수 가 사용자 가 정의 한 대상 에 데이터 속성 을 추가 합 니 다.  기 존 DOM 대상 에 속성 을 추가 하 는 것 으로 바 뀌 면 var = window. document 을 취소 합 니 다. 줄 의 주석.  

var newLine = "
";

var obj = {};
Object.defineProperty(obj, "newDataProperty", {
    value: 101,         //     
    writable: true,     //           
    enumerable: true,   //      ，      for...in   ，      Obejct.key()        
    configurable: true  //        ，         writable、enumerable、configurable  
    set:undefined,      //          
    get:undefined       //          
  
});
  
obj.newDataProperty = 102;
  
document.write("Property value: " + obj.newDataProperty + newLine);// Output:// Property value: 102
  
 
   
  
        ，             。
 
  
 
   
 
    
var names = Object.getOwnPropertyNames(obj);
for (var i = 0; i < names.length; i++) {
    var prop = names[i];

    document.write(prop + ': ' + obj[prop]);
    document.write(newLine);
}
// Output:
//  newDataProperty: 102
  
하지만 한 가지 더 주의해 야 할 것 이 있 습 니 다.  Object.defineProperty()  방법 이 속성 을 설정 할 때 속성 은 접근 기 속성 set   get 과 writable 또는 value 속성 을 동시에 설명 할 수 없습니다.  
즉, 특정한 속성 이 writable 또는 value 속성 을 설정 하면 이 속성 은 get 과 set 를 설명 할 수 없고 반대로 도 마찬가지 입 니 다. Object.defineProperty() 하나의 속성 을 설명 할 때 같은 속성 에 두 가지 이상 의 액세스 제어 가 나타 나 는 것 을 허용 하지 않 기 때문이다.
4. 데이터 속성 수정
대상 의 속성 특성 을 수정 하려 면 아래 코드 를 앞에서 보 여 준 addDataProperty 함수 에 추가 하 십시오.  descriptor 인 자 는 writable 특성 만 포함 합 니 다. 기타 데이터 속성 특성 은 변 하지 않 습 니 다.  
Object.defineProperty(obj, "newDataProperty", { writable: false });
var descriptor = Object.getOwnPropertyDescriptor(obj, "newDataProperty");
for (var prop in descriptor) {
    document.write(prop + ': ' + descriptor[prop]);
    document.write(newLine);
}

// Output
// writable: false
// value: 102
// configurable: true
// enumerable: true
  
사례
var newLine = "
";

var obj = {};
Object.defineProperty(obj, "newAccessorProperty", {
    set: function (x) {
        document.write("in property set accessor" + newLine);
        this.newaccpropvalue = x;
    },
    get: function () {
        document.write("in property get accessor" + newLine);
        return this.newaccpropvalue;
    },
    enumerable: true,
    configurable: true
});

obj.newAccessorProperty = 30;
document.write("Property value: " + obj.newAccessorProperty + newLine);

// Output:
// in property set accessor
// in property get accessor
// Property value: 30
  
요구 하 다
Internet Explorer 9 표준 모드, Internet Explorer 10 표준 모드 와 Windows 8. x 응용 상점 응용 프로그램 은 모든 기능 을 지원 합 니 다.
Internet Explorer 8 표준 모드 는 DOM 대상 을 지원 하지만 사용자 정의 대상 은 지원 되 지 않 습 니 다.  지정 가능 enumerable 화해시키다 configurable 특성 은 있 지만 사용 하지 않 습 니 다.   
7. set 와 get 에 대한 보충
var a={
    set pro(v){
        console.log("value is "+v);
    },
    get pro(){
        return 'pro';
    }
}

a.pro=3;
// value is 3
a.pro;
// pro
  
개인 이해: set 는 대상 속성 트리거 를 저장 하 는 방법 이 고 get 은 대상 속성 트리거 를 읽 는 방법 입 니 다.define Property 방법 에 따라 쓰 는 방법 이 다 르 니 주의 하 세 요.