ECMAScript 6 클래스의 게터와 세터는 무엇입니까?


102

ECMAScript 6 클래스에서 getter 및 setter의 요점이 무엇인지 혼란 스럽습니다. 목적은 무엇입니까? 아래는 제가 언급하는 예입니다.

class Employee {

    constructor(name) {
        this._name = name;
    }

    doWork() {
        return `${this._name} is working`;
    }

    get name() {
        return this._name.toUpperCase();
    }

    set name(newName){
        if(newName){ 
            this._name = newName;
        }
    }
}

1
그것에 대해 알고 있다면 C #의 것과 비슷합니다.
Arturo Torres Sánchez


이것을 설명하는 좋은 기사는 다음에서 찾을 수 있습니다. coryrylan.com/blog/javascript-es6-class-syntax "위의 클래스에는 이름 속성에 대한 getter 및 setter가 있습니다. '_'규칙을 사용하여 백업 필드를 만듭니다. 이름 속성을 저장합니다. get 또는 set이 호출 될 때마다 스택 오버플로가 발생합니다. "... 또한 변수가 진정으로 '개인'이 아니라고 말하지만, 개인 변수를 생성하는 새로운 방법이 많이 있습니다. JS 클래스; 내가 제일 좋아하는은 타이프 라이터를 사용하고,하지만 난 너무 기호 접근 방식을 사용했습니다
webdevinci

답변:


108

이러한 setter 및 getter를 사용하면 괄호를 사용하지 않고 속성을 직접 사용할 수 있습니다.

var emp = new Employee("TruMan1");

if (emp.name) { 
  // uses the get method in the background
}

emp.name = "New name"; // uses the setter in the background

이것은 속성의 값을 설정하고 얻는 것입니다.


1
속성 대신 속성을 의미 했습니까? 비트 나를 위해 혼란
Krizzu

좋은 눈, @Krizzu. 속성은 JavaScript에 존재하며 속성과는 완전히 다릅니다. 대답은 실제로 속성이 아니라 속성을 참조합니다. 나는 대답을 편집했습니다. 나는 대답자가 신경 쓰지 않을 것이라고 생각합니다. :)
Ray Toal 2016

이것이 실제로 그러한 이점인지 확신하지 못합니다. 어떻게 든 setter / getter를 사용하는 개념을 숨 깁니다. 클래스의 클라이언트는 적절하지 않은 속성을 직접 사용한다고 생각할 수 있지만 정보 / 세부 사항 숨김 원칙을 준수한다는 데 동의합니다. 우리는 이것을 사용 어쩌면 경우 ... 결과적으로는 쉽게 사용을하고 난 그냥 더 익숙해해야
크리스토프 칼린

setter에서 여러 매개 변수를 전달할 수 있다면 어떻게 사용합니까? @David Laberge
Vignesh S

setter와 getter를 수동으로 생성하려면 coryrylan.com/blog/javascript-es6-class-syntax 의 좋은 예가 있습니다 . Set : set name(newName) { this._name = newName; }Get :get name() { return this._name.toUpperCase(); }
Jim Doyle

48

ES6의 getter 및 setter는 ES5를 포함하여 다른 언어에서 수행하는 것과 동일한 용도로 사용됩니다. ES5 Object.defineProperty는 덜 깨끗하고 사용하기 더 번거롭지 만 이미을 통해 getter 및 setter를 허용 합니다.

효과적으로 getter 및 setter를 사용하면 읽기 및 쓰기에 표준 속성 액세스 표기법을 사용할 수 있으며 명시적인 getter 및 setter 메서드 없이도 속성을 검색하고 변경하는 방법을 사용자 지정할 수 있습니다.

위의 Employee 클래스에서 name이것은 다음과 같이 속성에 액세스 할 수 있음을 의미합니다 .

console.log(someEmployee.name);

그것은 것 보면 일반적인 속성 액세스처럼,하지만 실제로 부를 것이다 toUpperCase그것을 반환하기 전에 이름을. 마찬가지로 다음을 수행합니다.

someEmployee.name = null;

setter에 액세스하고의 setter에 _name도입 된 guard 절 때문에 내부 속성을 수정하지 않습니다 name.

일반적인 질문 인 왜 게터와 세터를 사용합니까?를 참조하십시오 . 회원 액세스 기능을 수정할 수있는 것이 유용한 이유에 대한 자세한 내용은


3

ES6 getter 및 setter는 Java의 유사한 개념과 실질적으로 다른 동기를 갖습니다.

Java에서 getter 및 setter는 클래스가 JavaBean을 정의 할 수 있도록합니다. getter와 setter의 요점은 bean이 public 필드에서 암시하는 것과 완전히 직교하는 "인터페이스"를 가질 수 있다는 것입니다. 그래서 JavaBean 속성이 아닌 "name"필드를 가질 수 있고 필드가 아닌 JavaBean 속성 "address"를 가질 수 있습니다.

JavaBean 속성은 Java 리플렉션을 통해 수천 개의 프레임 워크 (예 : Hibernate)에서 "검색 가능"합니다. 따라서 getter 및 setter는 빈 속성을 "노출"하는 표준 방법의 일부입니다.

함수 인 게터와 세터도 구현을 "추상화"하는 값을가집니다. 필드 또는 계산 된 ( "합성") 값일 수 있습니다. 따라서 "zipcode"라는 빈 속성이 있으면 저장된 문자열로 시작됩니다. 이제 주소 / 도시 / 주에서 계산 된 값으로 변경하고 싶다고 가정 해 보겠습니다.

필드를 사용하면이 코드가 중단됩니다.

      String zipcode = address.zipcode();

그러나 게터를 사용하면 이것은 깨지지 않습니다.

      String zipcode = address.getZipcode();

JavaScript에는 JavaBeans와 같은 것이 없습니다. 내가 읽은 한, GET 및 SET의 의도 된 값은 "합성"(계산 된) 속성으로 제한됩니다.

그러나 Java는 "필드"를 메소드로 호환성있게 변환 할 수 없지만 ES6 GET 및 SET는이를 허용한다는 점에서 Java보다 다소 낫습니다.

즉, 다음이있는 경우 :

       var zipcode = address.zipcode;

zipcode를 표준 객체 속성에서 getter로 변경하면 위 코드는 이제 GET 함수를 호출합니다.

정의에 GET을 포함하지 않으면 zipcode GET 메서드가 호출되지 않습니다. 대신 var에 zipcode 함수를 할당 할뿐입니다.

따라서 Java 및 JavaScript ES6 getter 및 setter를 이해하는 데 중요한 차이점이 있다고 생각합니다.


0
class Employee {

    constructor(name) {
      this._name = name;
    }

    doWork() {
      return `${this._name} is working`;
    }

    get name() {
      // when you get this by employeeInstance.mame
      // the code below will be triggered
      // and you can do some logic here
      // just like `console.log` something you want
      console.log('get triggered!')
      return this._name.toUpperCase();
    }

    set name(newName) {
      // the same as `get`
      // when you employeeInstance.mame = 'xxx'
      // the code blew will be trigged
      // and you can also do some logic 
      // like here is a `console.log` and `if check`
      console.log('set triggered!')
      if (newName) {
        this._name = newName;
      }
    }
  }

  const employeeInstance = new Employee('mike')
  employeeInstance.name
  employeeInstance.name = '' // this won't be success, because the `if check`
  console.log(employeeInstance.name)

  // => 
  // get triggered
  // set triggered
  // get triggered
  // MIKE

어쨌든 gettersetter단지 스파이 같다. 객체의 속성을 감시하므로 속성의 값을 얻거나 설정할 때마다 무언가를 할 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.