JavaScript 객체 접근자

JavaScript 접근자（Getter와 Setter）

ECMAScript 5 (2009)에서 Getter와 Setter가 도입되었습니다.

Getter와 Setter는 계산된 속성에 대한 객체 접근자를 정의할 수 있도록 합니다.

JavaScript Getter（get 키워드）

이 예제에서 사용합니다 lang 속성을 가져옵니다 language 속성의 값.

인스턴스

// 객체를 생성합니다:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};
// getter를 사용하여 객체에서 데이터를 표시합니다:
document.getElementById("demo").innerHTML = person.lang;

직접 테스트해 보세요

JavaScript Setter（set 키워드）

이 예제에서 사용합니다 lang 속성을 설정합니다 language 속성의 값.

인스턴스

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};
// setter를 사용하여 객체 속성을 설정합니다:
person.lang = "en";
// 객체에서 데이터를 표시합니다:
document.getElementById("demo").innerHTML = person.language;

직접 테스트해 보세요

JavaScript 함수인가 Getter인가?

아래 두 예제의 차이점은 무엇인가요?

예제 1

var person = {
  firstName: "Bill",
  lastName : "Gates",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// 객체에서 데이터를 표시하는 방법을 사용합니다:
document.getElementById("demo").innerHTML = person.fullName();

직접 테스트해 보세요

예제 2

var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// getter를 사용하여 객체에서 데이터를 표시합니다:
document.getElementById("demo").innerHTML = person.fullName;

직접 테스트해 보세요

예제 1에서 fullName을 함수로 접근: person.fullName()。

예제 2에서 fullName을 속성으로 접근: person.fullName。

두 번째 예제는 더 간결한 문법을 제공합니다.

데이터 품질

getter와 setter를 사용할 때, JavaScript는 더 나은 데이터 품질을 보장할 수 있습니다.

이 예제에서는 다음과 같이 사용합니다 lang 속성은 대문자로 반환됩니다. language 속성의 값:

인스턴스

// 객체를 생성합니다:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};
// getter를 사용하여 객체에서 데이터를 표시합니다:
document.getElementById("demo").innerHTML = person.lang;

직접 테스트해 보세요

이 예제에서는 다음과 같이 사용합니다 lang 속성은 값이 대문자로 저장됩니다 language 속성 중에서:

인스턴스

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};
// setter를 사용하여 객체 속성을 설정합니다:
person.lang = "en";
// 객체에서 데이터를 표시합니다:
document.getElementById("demo").innerHTML = person.language;

직접 테스트해 보세요

getter와 setter를 사용하는 이유는 무엇인가요?

  • 더 간결한 문법을 제공합니다
  • 속성과 메서드의 문법이 같게 할 수 있습니다
  • 데이터 품질을 더 좋게 보장할 수 있습니다
  • 백그라운드 작업에 유용

카운터 인스턴스 하나

인스턴스

var obj = {
  counter : 0,
  get reset() {
    this.counter = 0;
  },
  get increment() {
    this.counter++;
  },
  get decrement() {
    this.counter--;
  },
  set add(value) {
    this.counter += value;
  },
  set subtract(value) {
    this.counter -= value;
  }
};
// 카운터 작업：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
Object.defineProperty()

직접 테스트해 보세요

Object.defineProperty() getter와 setter를 추가하기도 할 수 있습니다:

인스턴스

// 객체 정의
var obj = {counter : 0};
// 정의자 정의
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;}
});
// 카운터 작업：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

직접 테스트해 보세요

브라우저 지원

Internet Explorer 8 또는 이전 버전은 Getter 및 Setter를 지원하지 않습니다：

네 9.0 네 네 네