constructor function with getter / setter
오늘 갑자기 궁금하게 된 점이 있었는데,
class 로 객체 인스턴스를 생성할때는 getter와 setter를 만들기가 쉬웠지만
생산형 함수에는 어떻게 하는지 몰랐다.
MDN을 참고해보니 이런 방법이 있었다.
Defining a getter on existing objects using Object.defineProperty()
To append a getter to an existing object later at any time, use Object.defineProperty().
const o = {a: 0};
Object.defineProperty(o, 'b', { get: function() { return this.a + 1; } });
console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)
이 방법을 참고하면 이렇게 할수 있다.
//예시:
const Test = function () {
this.__a = 3;
Object.defineProperty(this, 'a', {
get: function() {
return this.__a
},
set: function(n) {
console.log(this)
return this.__a = n;
}
})
}
const test1 = new Test();
console.log(test1.a) // 3
console.log(test1.a = 5) //5
console.log(Object.getOwnPropertyDescriptor(test1, 'a'));
/*{
get: ƒ get(),
set: ƒ set(),
enumerable: false,
configurable: false
} */
console.log(Object.getOwnPropertyDescriptor(
Object.getPrototypeOf(test1), 'a'
)) // undefined
혹은 프로토 타입 사용:
function Something(defaultFoo) {
this._foo = defaultFoo;
}
Object.defineProperty(Something.prototype, 'foo', {
get: function() {
return this._foo;
},
set: function(value) {
this._foo = value;
}
});
var something = new Something("bar");
console.log(something.foo);
something.foo = 'baz';
console.log(something.foo);
Object.defineProperty(객체인수, 속성이름, descriptors)를 생산 함수 안에 사용해 생산형 함수에도 각 인스턴스 객체들에게 getter 나 setter 접근형 매소드를 형성 할수 있다.
다만 이러한 점에서 한가지 약간의 차이점이 있는데 Object.defineProperty는 인스턴스 객체의 속성값을 정의 하고 일반 getter /setter 는 객체의 Prototype에 속성값을 정의 한다.
class Example {
get hello() {
return 'world';
}
}
const obj = new Example();
console.log(Object.getOwnPropertyDescriptor(obj, 'hello')); // undefined
console.log(
Object.getOwnPropertyDescriptor(
Object.getPrototypeOf(obj), 'hello'
)
);
// {
get: ƒ get hello(),
set: undefined,
enumerable: false,
configurable: true
}
const obj2 = new Example();
Object.defineProperty(obj2, 'hello2', {
value: 'world2',
writable: true
})
console.log(Object.getOwnPropertyDescriptor(obj2, 'hello2'));
// {
value: 'world2',
writable: true,
enumerable: false,
configurable: false
}
console.log(
Object.getOwnPropertyDescriptor(
Object.getPrototypeOf(obj2), 'hello2'
)
); // undefined
Author And Source
이 문제에 관하여(constructor function with getter / setter), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@shinyo627/constructor-function-with-getter-setter저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)