JavaScript Object.defineProperty()

정의와 사용법

Object.defineProperty() 메서드는 객체의 속성을 추가 또는 수정하는 데 사용됩니다.

Object.defineProperty() 메서드는 속성의 메타데이터를 변경할 수 있습니다.

Object.defineProperty() 메서드는 getter와 setter를 추가할 수 있습니다.

관련 메서드:

Object.defineProperty() 속성을 추가 또는 수정합니다.

Object.defineProperties() 여러 속성을 추가 또는 수정합니다.

Object.getOwnPropertyNames() 객체의 모든 속성 이름을 반환합니다.

Object.getOwnPropertyDescriptor() 속성의 설명자를 반환합니다.

Object.getOwnPropertyDescriptors() 객체의 모든 속성의 설명자를 반환합니다.

인스턴스

예제 1

속성 추가:

// 객체를 생성
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// 새 속성 추가
Object.defineProperty(person, "year", {value:"2008"});

직접 시도해보세요

예제 2

속성 수정:

// 객체를 생성
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// 속성을 변경
Object.defineProperty(person, "language", {value:"NO"});

직접 시도해보세요

예제 3

// 객체를 생성
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// 속성을 변경
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: true,
  configurable: true
});
// 속성을 목록에 넣기
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
// 속성 표시
document.getElementById("demo").innerHTML = txt;

직접 시도해보세요

예제 4

다음 예제는 이전 예제 코드와 동일하지만, language 속성을 숨겨서 인덱스 가능하지 않게 했습니다:

// 객체를 생성
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// 속성을 변경
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: false,
  configurable: true
});
// 속성을 목록에 넣기
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

직접 시도해보세요

예제 5

이 예제에서 setter와 getter를 생성하여 language 속성의 값이 대문자로 업데이트되도록 합니다:

// 객체를 생성
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// 속성을 변경
Object.defineProperty(person, "language", {
  get: function() { return language },
  set: function(value) { language = value.toUpperCase() }
});
// language를 변경
person.language = "en";
// language를 표시
document.getElementById("demo").innerHTML = person.language;

직접 시도해보세요

예제 6

이 예제에서 getter를 사용하여 firstName과 lastName를 연결합니다:

// 객체를 생성
const person = {
  firstName: "Bill",
  lastName: "Gates"
};
// Getter를 정의
Object.defineProperty(person, "fullName", {
  get: function () { return this.firstName + " " + this.lastName; }
});

직접 시도해보세요

예제 7

JavaScript의 Getter와 Setter는 카운터를 생성하는 데 매우 적합합니다:

// 定义 Setter 和 Getter
Object.defineProperty(obj, "reset", {
  get: function () { this.counter = 0; }
});
Object.defineProperty(obj, "increment", {
  get: function () { this.counter++; }
});
Object.defineProperty(obj, "decrement", {
  get: function () { this.counter--; }
});
Object.defineProperty(obj, "add", {
  set: function (value) { this.counter += value; }
});
Object.defineProperty(obj, "subtract", {
  set: function (value) { this.counter -= value; }
});

직접 시도해보세요

문법

Object.defineProperty(object, property, descriptor)

매개변수

반환 값

브라우저 지원

Object.defineProperty() ECMAScript5 (ES5)의 기능입니다.

2013년 7월부터 모든 현대 브라우저는 완전히 ES5（JavaScript 2009）를 지원합니다：