[javascript] 자바 스크립트 Object.defineProperty를 사용하는 방법

당신이 질문 때문에 비슷한 질문을 ,의 단계에 의해 단계를 보자. 조금 더 길지만 이것을 쓰는 데 소비 한 시간보다 훨씬 많은 시간을 절약 할 수 있습니다.

속성 은 클라이언트 코드를 깔끔하게 분리하도록 설계된 OOP 기능입니다. 예를 들어 일부 전자 상점에서는 다음과 같은 객체가있을 수 있습니다.

function Product(name,price) {
  this.name = name;
  this.price = price;
  this.discount = 0;
}

var sneakers = new Product("Sneakers",20); // {name:"Sneakers",price:20,discount:0}
var tshirt = new Product("T-shirt",10);  // {name:"T-shirt",price:10,discount:0}

그런 다음 고객 코드 (e-shop)에서 제품에 할인을 추가 할 수 있습니다.

function badProduct(obj) { obj.discount+= 20; ... }
function generalDiscount(obj) { obj.discount+= 10; ... }
function distributorDiscount(obj) { obj.discount+= 15; ... }

나중에 전자 상점 주인은 할인이 80 %를 넘을 수 없다는 것을 깨달을 수 있습니다. 이제 클라이언트 코드에서 할인 수정이 발생할 때마다 찾아서 줄을 추가해야합니다.

if(obj.discount>80) obj.discount = 80;

그런 다음 전자 상점 소유자는 “고객이 리셀러 인 경우 최대 할인은 90 % 일 수 있습니다” 와 같이 전략을 추가로 변경할 수 있습니다 . 그리고 여러 장소에서 변경을 다시 수행해야하며 전략이 변경 될 때마다 이러한 행을 변경해야합니다. 이것은 나쁜 디자인입니다. 이것이 캡슐화 가 OOP의 기본 원칙 인 이유 입니다. 생성자가 다음과 같은 경우 :

function Product(name,price) {
  var _name=name, _price=price, _discount=0;
  this.getName = function() { return _name; }
  this.setName = function(value) { _name = value; }
  this.getPrice = function() { return _price; }
  this.setPrice = function(value) { _price = value; }
  this.getDiscount = function() { return _discount; }
  this.setDiscount = function(value) { _discount = value; }
}

그런 다음 getDiscount( accessor ) 및 setDiscount( mutator ) 메소드를 변경할 수 있습니다 . 문제는 대부분의 멤버가 공통 변수처럼 행동한다는 것입니다. 할인은 특별한주의가 필요합니다. 그러나 우수한 디자인을 위해서는 코드를 확장 가능하게 유지하기 위해 모든 데이터 멤버를 캡슐화해야합니다. 따라서 아무것도하지 않는 많은 코드를 추가해야합니다. 이것은 또한 나쁜 디자인, 상용구 반 패턴 입니다. 때로는 나중에 필드를 메소드로 리팩터링 할 수 없습니다 (eshop 코드가 커지거나 일부 타사 코드가 이전 버전에 따라 다를 수 있음). 그러나 여전히 악합니다. 그래서 속성이 많은 언어로 도입되었습니다. 원래 코드를 유지하고 할인 멤버를get그리고 set블록 :

function Product(name,price) {
  this.name = name;
  this.price = price;
//this.discount = 0; // <- remove this line and refactor with the code below
  var _discount; // private member
  Object.defineProperty(this,"discount",{
    get: function() { return _discount; },
    set: function(value) { _discount = value; if(_discount>80) _discount = 80; }
  });
}

// the client code
var sneakers = new Product("Sneakers",20);
sneakers.discount = 50; // 50, setter is called
sneakers.discount+= 20; // 70, setter is called
sneakers.discount+= 20; // 80, not 90!
alert(sneakers.discount); // getter is called

마지막 한 줄을 참고하십시오. 올바른 할인 가치에 대한 책임이 고객 코드 (e-shop 정의)에서 제품 정의로 이동되었습니다. 제품은 데이터 멤버의 일관성을 유지해야합니다. 코드가 우리의 생각과 같은 방식으로 작동한다면 좋은 디자인입니다.

속성에 대해 너무 많은. 그러나 javascript는 C #과 같은 순수한 객체 지향 언어와 다르며 기능을 다르게 코딩합니다.

C # 에서 필드를 속성으로 변환하는 것은 중요한 변경 사항 이므로 코드를 별도로 컴파일 된 클라이언트에서 사용할 수있는 경우 공용 필드를 자동 구현 속성 으로 코딩해야합니다 .

Javascript 에서 표준 속성 (위에서 설명한 getter 및 setter가있는 데이터 멤버)은 접근 자 설명자 (질문에있는 링크에서 )로 정의됩니다 . 전용, 당신이 사용할 수있는 데이터 기술자를 (당신이 예를 사용할 수 있도록 값 과 설정을 동일한 속성에) :

• 접근 자 설명자 = get + set (위 예 참조)
  • get 은 함수 여야합니다. 반환 값은 속성을 읽는 데 사용됩니다. 지정하지 않으면 기본값은 undefined 이며 undefined 를 반환하는 함수처럼 동작합니다
  • set 은 함수 여야합니다. 속성에 값을 할당 할 때 RHS로 매개 변수가 채워집니다. 지정하지 않으면 기본값은 undefined 이며 빈 함수처럼 동작합니다.
• 데이터 디스크립터 = 값 + 쓰기 가능 (아래 예 참조)
  • 값 기본값 정의되지 않음 ; 쓰기 가능 , 구성 가능 및 열거 가능 (아래 참조)이 true 인경우이속성은 일반 데이터 필드처럼 동작합니다
  • 쓰기 가능 -기본값 false ; true 가 아닌 경우 속성은 읽기 전용입니다. 쓰기 시도는 오류 *없이 무시됩니다!

두 디스크립터 모두 다음 멤버를 가질 수 있습니다.

• 구성 가능 -기본값 false ; true가 아닌 경우 속성을 삭제할 수 없습니다. 삭제 시도는 오류없이 무시됩니다 *!
• 열거 가능 -기본값은 false입니다 . 참이면 반복됩니다for(var i in theObject). false 인 경우 반복되지 않지만 여전히 공용으로 액세스 할 수 있습니다.

^{*에 않는 엄격 모드 -가에 걸렸 않는 경우에 JS는 형식 오류와 실행을 중지 시도 캐치 블록}

이 설정을 읽으려면을 사용하십시오 Object.getOwnPropertyDescriptor().

예를 들어 배우십시오 :

var o = {};
Object.defineProperty(o,"test",{
  value: "a",
  configurable: true
});
console.log(Object.getOwnPropertyDescriptor(o,"test")); // check the settings    

for(var i in o) console.log(o[i]); // nothing, o.test is not enumerable
console.log(o.test); // "a"
o.test = "b"; // o.test is still "a", (is not writable, no error)
delete(o.test); // bye bye, o.test (was configurable)
o.test = "b"; // o.test is "b"
for(var i in o) console.log(o[i]); // "b", default fields are enumerable

클라이언트 코드와 같은 치트를 허용하지 않으려면 세 가지 수준의 제한으로 객체를 제한 할 수 있습니다.

• Object.preventExtensions (yourObject) 는 새 속성이 yourObject에 추가되지 않도록 합니다. 사용Object.isExtensible(<yourObject>)방법은 개체에 사용 된 경우 확인합니다. 예방은 얕습니다 (아래 참조).
• Object.seal (yourObject) 은 위와 동일하며 속성을 제거 할 수 없습니다 (효과적으로configurable: false모든 속성으로설정). Object.isSealed(<yourObject>)객체에서이 기능을 감지하는 데사용합니다. 씰이 얕습니다 (아래 참조).
• Object.freeze (yourObject) 는 위와 동일하며 속성을 변경할 수 없습니다 (writable: false데이터 설명자를 사용하여 모든 속성으로효과적으로 설정). 세터의 쓰기 가능 속성은 영향을받지 않습니다 (속성이 없기 때문에). 동결은 얕습니다 . 즉, 속성이 Object 인 경우 속성이 고정되지 않습니다 (원하는 경우 딥 카피 복제 와 유사한 “깊은 고정”과 같은 작업을 수행해야 함). Object.isFrozen(<yourObject>)감지하는 데사용하십시오.

몇 줄의 재미 만 쓰면 이것을 귀찮게 할 필요가 없습니다. 그러나 게임을 코딩하려면 (관련 질문에서 언급 한 바와 같이) 훌륭한 디자인에 관심을 가져야합니다. 반 패턴 및 코드 냄새 에 대해 Google에 무언가를 시도하십시오 . “아, 코드를 완전히 다시 작성해야합니다!” 와 같은 상황을 피하는 데 도움이 됩니다. 코드를 많이 작성하려는 경우 몇 개월 동안 절망 할 수 있습니다. 행운을 빕니다.

답변

console.log(player.health);

player.getHealth = function(){
  return 10 + this.level*15;
}
console.log(player.getHealth());

player.health = 5; // Doesn't do anything, since there is no set function defined

var player = {
  level: 5
};

Object.defineProperty(player, "health", {
  get: function() {
    return 10 + (player.level * 15);
  }
});

console.log(player.health); // 85
player.level++;
console.log(player.health); // 100

player.health = 5; // Does nothing
console.log(player.health); // 100

var employee = {
    firstName: "Jameel",
    lastName: "Moideen"
};
employee.toString=function () {
    return this.firstName + " " + this.lastName;
};
console.log(employee.toString());

var employee = {
    firstName: "Jameel",
    lastName: "Moideen"
};
Object.defineProperty(employee, 'toString', {
    value: function () {
        return this.firstName + " " + this.lastName;
    },
    writable: true,
    enumerable: true,
    configurable: true
});
console.log(employee.toString());

console.log(Object.keys(employee));

var employee = {
    firstName: "Jameel",
    lastName: "Moideen"
};
Object.defineProperty(employee, 'toString', {
    value: function () {
        return this.firstName + " " + this.lastName;
    },
    writable: false,
    enumerable: false,
    configurable: true
});

//change enumerable to false
Object.defineProperty(employee, 'toString', {

    enumerable: true
});
employee.toString="changed";
console.log(Object.keys(employee));

var obj = {};
['data', 'name'].forEach(function(name) {
    Object.defineProperty(obj, name, {
        get : function() {
            return 'setter & getter';
        }
    });
});


console.log(obj.data);
console.log(obj.name);

Object.defineProperty(player, "health", {
    get: function () {
        return 10 + ( player.level * 15 );
    }
});

const player = {
  level: 10
};

Object.defineProperty(player, "health", {
  configurable: true,
  enumerable: false,
  get: function() {
    console.log('Inside the get function');
    return 10 + (player.level * 15);
  }
});

console.log(player.health);
// the get function is called and the return value is returned as a value

for (let prop in player) {
  console.log(prop);
  // only prop is logged here, health is not logged because is not an iterable property.
  // This is because we set the enumerable to false when defining the property
}