쉬운 JavaScript 8부: 게터와 세터란 무엇입니까?
JavaScript에서 getter와 setter에 대해 들어보셨을 것입니다. 이러한 것들이 무엇인지 살펴 보겠습니다.
먼저 setter를 사용하여 속성 값을 설정합니다. setter는 속성의 값이 변경될 때마다 호출됩니다. 즉, setter 함수 내에서 사용되는 속성이 변경될 때마다 함수를 실행합니다. 다음 코드를 살펴보십시오.
var foo = { set cal(x) { this.a = x + 5 }, a: undefined } foo.cal = 8; console.log(foo.a);
객체 foo에서 setter cal은 속성 a가 변경 될 때마다 호출됩니다. 출력으로 13이 인쇄됩니다. setter를 만드는 동안 다음 규칙을 따라야 합니다.
- setter 이름은 문자열 또는 숫자일 수 있습니다.
- setter에는 정확히 하나의 입력 매개 변수가 있어야 합니다.
- 개체에는 동일한 식별자를 가진 setter가 하나만 있어야 합니다
- delete 연산자를 사용하여 setter를 제거할 수 있습니다
setter의 다른 예는 다음 코드를 살펴보겠습니다.
var greet = { set welcome(m) { this.msg = this.msg + m; }, msg: "Hello " } greet.welcome = "Jaosn"; console.log(greet.msg);
위의 코드 스니펫을 출력으로 사용하면 Hello Jason이 인쇄됩니다. Object.defineProperty를 사용하여 기존 객체에 setter를 추가할 수도 있습니다. foo 객체가 있다고 가정 해 보겠습니다.
var foo = { num: 0 }
이제 기존 객체 foo 에 대한 setter를 추가하려면 Object.defineProperty 를 사용하십시오.
Object.defineProperty(foo, 'cal', { set: function (x) { this.num = this.num + x; } }); foo.cal = 9; console.log(foo.num); //9
위에서는 기존 객체에 setter를 추가하고 출력으로 9를 얻습니다.
JavaScript Getter
JavaScript getter를 사용하면 속성 읽기를 수행할 때마다 함수를 호출할 수 있습니다. 따라서 함수를 호출하려는 경우 JavaScript는 객체를 조회할 때마다 getter를 사용합니다. 다음 코드를 살펴보겠습니다.
var cal = { num: 0, get add() { return this.num + 5; } } console.log(cal.add);
위의 코드에서 출력은 num 속성의 계산된 값이 됩니다. 주로 getters를 사용하여 동적으로 계산된 값을 반환하는 속성의 값을 읽습니다. 다음 기준에 따라 속성의 값을 읽어야 하는 경우:
- 속성은 동적으로 계산된 값을 반환합니다
- 속성의 내부 값은 메서드를 명시적으로 호출하지 않고 반영되어서는 안 됩니다
이 두 가지 요구 사항을 달성하려면 getter를 사용해야 합니다. 아래 코드를 고려하십시오.
var foo = { name: 'jason', get Name() { return this.name + " beres"; } } console.log(foo.Name);
위의 코드에서는 getter를 사용하여 name 속성의 값을 계산합니다. 여기에서 jason beres 출력을 얻을 수 있습니다.
게터를 만드는 동안 다음 규칙을 기억해야 합니다.
- getter 이름은 문자열 또는 숫자일 수 있습니다.
- getter는 입력 매개 변수를 가져서는 안 됩니다 – 정확히 0개의 매개 변수를 가져야 합니다.
- 객체에는 동일한 식별자를 가진 getter가 하나만 있어야 합니다
- delete 연산자를 사용하여 getter를 제거할 수 있습니다
Object.defineProperty를 사용하여 기존 객체에 getter를 추가할 수도 있습니다. foo 객체가 있다고 가정 해 보겠습니다.
var foo = { num: 1 }
기존 객체 foo에 대한 getter를 추가하려면 Object.defineProperty를 사용하십시오.
Object.defineProperty(foo, 'numgetter', { get: function () { return this.num + 1; } }); console.log(foo.numgetter); //2
위에서 볼 수 있듯이 기존 객체에 getter를 추가하면 출력은 2가 됩니다.
결론
getter와 setter에 대한 좋은 이해는 JavaScript에서 객체로 작업하는 데 필요합니다. setter를 사용하면 속성 값이 변경될 때마다 함수를 호출할 수 있으며 getter를 사용하면 속성의 계산된 값을 반환할 수 있습니다. 그리고 그게 다야!
HTML5, Angular, React 및 ASP.NET MVC와 함께 사용하여 풍부한 인터넷 응용 프로그램을 만들 수 있는 JavaScript/HTML5 및 ASP.NET MVC 대한 Ignite UI 확인하는 것을 잊지 마십시오. 모든 JavaScript 컨트롤의 평가판을 무료로 다운로드할 수 있습니다!