Object.defineProperty 크롬 devtool에서 보이지 않는 부분

Question

글쎄, Chrome에서 Object.watch의 polyfill을 사용할 때 질문이 생겼습니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch https://gist.github.com/eligrey/384583

polyfill 꽤 짧은 하나이며, 당신은 원래의 속성을 삭제하는 방법을 읽고 바로 새 속성 같은 값이지만 재정의 getter 및 setter로 정의 할 수 있습니다. 당신이 크롬 devtool에서 객체 o을 확인 그 후

var o = { p: 1 }; 
o.watch("p", function (id, oldval, newval) { 
    console.log("o." + id + " changed from " + oldval + " to " + newval); 
    return newval; 
}); 

을 :이 polyfill을 사용하고 o.p에서 볼 경우

문제이다. 쾅! 객체 o은 이제 비어 있습니다! 실제로는 여전히 p 속성을 가지고 있습니다. o.p을 입력하면 o.p = 1이 표시됩니다.

제 질문은 Chrome 개발자 도구 개체 속성 목록에서 속성이 보이지 않는 이유는 무엇입니까?

참고 : Object.watch에 대해 모르거나 이해하지 못하는 경우 Object.defineProperty을 잘 아는 한이 질문에 대해 계속 저를 도울 수 있습니다.

---

편집 : 새로운 속성을 만들고 그 getter 및 setter를 재정의한다고 생각한 것처럼 편집 할 수 없습니다. 따옴표 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty "객체에있는 속성 설명자는 데이터 설명자와 접근 자 설명자의 두 가지 주요 특성으로 제공됩니다. 데이터 설명자는 값을 가진 속성으로 쓰기 가능하거나 쓰기 불가능합니다. 접근 자 설명자는 다음에 설명 된 속성입니다. getter-setter 한 쌍의 기능. "

그래서 polyfill이 대상 속성을 "데이터 속성"에서 "접근 자 속성"으로 변경하는 것처럼 보입니다. 이걸 polyfill하는 유일한 방법이라고 생각합니까?

Answer 1

제 질문은 Chrome 개발자 도구 개체 속성 목록에서 속성이 보이지 않는 이유는 무엇입니까?

답변입니다 : 표시되지만 이제는 getter and setter입니다. 값이 이제 개인입니다 만 게터를 사용하여 읽을 수 있기 때문에 그건 : 당신이 값의 볼 수없는 이유

Object {} 
get p: function() { 
set p: function (val) { 
__proto__: Object 

jsfiddle

하지만 경우에, 당신은 요구하고있다.

console.log(o.p); 

업데이트 : 읽기 Mutator method

mutator 메소드 변경자 (mutator) 방법 변경을 제어하는 ​​데 사용하는 방법입니다 위키 백과, 우리 모두의 백과 사전 컴퓨터 과학에서

,에서

변수 에 그들은 또한 '' 'setter' '방법으로 널리 알려져 있습니다.종종 설정자는 '' 'getter' ''(접근 자라고도 함)와 함께 제공되며 은 개인 멤버 변수의 값을 반환합니다. The mutator 메서드는 때로는 "setter"라고하며 캡슐화 원칙에 따라 개체 지향 프로그래밍에서 가장 자주 사용됩니다. 이 원칙에 따라 클래스의 멤버 변수는 비공개로 만들어 다른 코드에서 숨기고 보호하며 은 매개 변수로 원하는 새 값을 사용하는 public 멤버 함수 (변형 메서드) 으로 만 수정할 수 있습니다 선택적으로 의 유효성을 검사하고 개인 멤버 변수를 수정합니다.

당신은 개체를 확인하고 공공 방법을 getPrivate 및 setPrivate (유사 너무 실제 게터을 볼 수 있습니다

function MyClass() { 
    var privateVar = 0; 

    this.getPrivate = function() { 
     return privateVar; 
    } 

    this.setPrivate = function (value) { 
     privateVar = value; 
    } 
} 

var newObject = new MyClass(); 

console.log(newObject); 

console.log(newObject.getPrivate()); 

출력

MyClass {getPrivate: function, setPrivate: function} 
getPrivate: function() { 
setPrivate: function (value) { 
__proto__: MyClass 

0 

jsfiddle

에이 예제를 고려 그리고 세터 s가 Object.defineProperty에 의해 생성됨), 멤버 변수 privateVariable의 값을 볼 수 없습니다. getPrivate public 메서드를 호출하여 값을 볼 수만 있습니다.