JavaScript Getters and Setters

JavaScript getters 및 setters 소개

Person:

class Person { constructor(name) { this.name = name; } } let person = new Person("John"); console.log(person.name); // John

Code language: JavaScript (javascript)

그Person클래스는 속성이 있습니다.name그리고 건설업자.컨스트럭터가 초기화를 실시합니다.name속성을 문자열로 지정합니다.

가끔, 당신은 그 일을 원하지 않는다.name다음과 같이 직접 액세스해야 합니다.

person.name

Code language: CSS (css)

이를 위해, 여러분은 두 가지 방법을 생각해 낼 수 있습니다.name소유물.예를 들어 다음과 같습니다.

class Person { constructor(name) { this.setName(name); } getName() { return this.name; } setName(newName) { newName = newName.trim(); if (newName === '') { throw 'The name cannot be empty'; } this.name = newName; } } let person = new Person('Jane Doe'); console.log(person); // Jane Doe person.setName('Jane Smith'); console.log(person.getName()); // Jane Smith

Code language: JavaScript (javascript)

이 예에서는Person클래스에는name소유물.또한 두 가지 추가 방법이 있습니다.getName()그리고.setName().

그getName()method는 의 값을 반환합니다.name소유물.

그setName()method는 인수를 할당합니다.name소유물.그setName()의 양끝에서 화이트 스페이스를 제거합니다.newName인수에 의해 예외가 발생합니다.newName비어 있습니다.

그constructor()를 호출하다setName()초기화 방법name속성:

constructor(name) { this.setName(name); }

Code language: JavaScript (javascript)

그getName()그리고.setName()메서드는 Java 및 C++와 같은 다른 프로그래밍 언어에서 getter 및 setter로 알려져 있습니다.

ES6에서는 get 키워드 및 set 키워드를 사용하여 getter 및 setter를 정의하기 위한 특정 구문을 제공합니다.예를 들어 다음과 같습니다.

class Person { constructor(name) { this.name = name; } get name() { return this._name; } set name(newName) { newName = newName.trim(); if (newName === '') { throw 'The name cannot be empty'; } this._name = newName; } }

Code language: JavaScript (javascript)

작동 방식.

일단은name속성이 로 변경되었습니다._namegetter 및 setter와 이름이 충돌하지 않도록 합니다.

둘째, getter는 다음 명령어를 사용합니다.get키워드 뒤에 메서드 이름을 붙입니다.

get name() { return this._name; }

Code language: JavaScript (javascript)

getter를 호출하려면 다음 구문을 사용합니다.

let name = person.name;

Code language: JavaScript (javascript)

JavaScript가 에 대한 액세스를 확인할 때name의 특성Personclass, 체크합니다.Person클래스에는 다음이 있습니다.name소유물.

그렇지 않은 경우 JavaScript는 Person 클래스가 에 바인드하는 메서드가 있는지 여부를 확인합니다.name소유물.이 예에서는name()메서드는 에 바인드됩니다.name를 경유하여get키워드를 지정합니다.JavaScript는 getter 메서드를 찾으면 getter 메서드를 실행하고 값을 반환합니다.

세 번째, 세터는set키워드 뒤에 메서드 이름을 붙입니다.

set name(newName) { newName = newName.trim(); if (newName === '') { throw 'The name cannot be empty'; } this._name = newName; }

Code language: JavaScript (javascript)

JavaScript에 의해name()값을 할당하는 경우 setter는name다음과 같은 속성:

person.name = 'Jane Smith';

Code language: JavaScript (javascript)

클래스에 getter만 있고 setter가 없는 경우 setter를 사용하려고 하면 변경은 적용되지 않습니다.다음의 예를 참조해 주세요.

class Person { constructor(name) { this._name = name; } get name() { return this._name; } } let person = new Person("Jane Doe"); console.log(person.name); // attempt to change the name, but cannot person.name = 'Jane Smith'; console.log(person.name); // Jane Doe

Code language: JavaScript (javascript)

이 예에서는Person클래스에는name더 많이 얻었지만name세터세터 호출을 시도합니다.그러나 사용자 클래스에는 이름 설정기가 없으므로 변경 사항은 적용되지 않습니다.

오브젝트 리터럴에서의 getter 사용

다음으로 getter를 정의하는 예를 나타냅니다.latest마지막 참석자를 돌려보내다meeting오브젝트:

let meeting = { attendees: [], add(attendee) { console.log(`${attendee} joined the meeting.`); this.attendees.push(attendee); return this; }, get latest() { let count = this.attendees.length; return count == 0 ? undefined : this.attendees[count - 1]; } }; meeting.add('John').add('Jane').add('Peter'); console.log(`The latest attendee is ${meeting.latest}.`);

Code language: JavaScript (javascript)

출력:

John joined a meeting. Jane joined a meeting. Peter joined a meeting. The latest attendee is Peter.

요약

• 를 사용합니다.get그리고.set클래스 또는 객체의 JavaScript getter 및 setter를 정의하는 키워드입니다.
• 그get키워드는 오브젝트 속성을 조회 시 호출되는 메서드에 바인드합니다.
• 그set키워드를 지정하면 오브젝트 속성이 할당되었을 때 호출되는 메서드에 오브젝트 속성이 바인드됩니다.

 

 

 

 

 

 

참고: https://www.javascripttutorial.net/es6/javascript-getters-and-setters/