javascript의 set/get은 this.xxx로 할까, prototype을 이용할까? Javascript & HTML & CSS/pure javascript2017. 1. 1. 01:32
자바스크립트의 메서드는...
객체 내부에 this.getNum = function(){}과 같이 기술할 수도 있고,
객체 외부에 객체명.prorotype.getNum = function(){}과 같이 기술할 수도 있다.
결과부터 말하면 자바스크립트에서 get/set은 객체 내부에 this.getNum()과 같이 쓴다.
근데 일반 메서드는 왜 prototype을 이용해 밖에 기술하고, set/get은 this.get 방식으로 객체 내부에 기술하는 걸까?
아래 코드를 보며 결과를 예측해 보자.
총 4개의 테스트를 했으니 4개의 출력결과가 나올 것이다.
1) this.getNum()사용한 객체의 인스턴스를 만들어 getNum() 호출
1-1) 동일 객체의 또 다른 인스턴스를 만들어 getNum() 호출
2) 객체명.prototype.getNum()사용한 객체의 인스턴스를 만들어 getNum() 호출
2-1) 동일 객체의 또 다른 인스턴스를 만들어 getNum() 호출
정답은?
10
undefined
11
11
obj3과 obj4는 각기 다른 인스턴스를 생성했음에도 var값이 공유가 되었다.
그러므로 인스턴스마다의 변수를 다루는 set/get은 this.getNum 방식을 사용하는 것이 맞다.
2017.01.03 추가
전혀 아니다. 완전히 잘못 이해하고 있었다. 이 글은 엉터리다.
하지만 내용은 그냥 그대로 놔둔다.
(귀찮음 + 내가 어떤 부분에서 잘못 생각했었는지 복기를 위해)
ObjpPrototypeSetGet.prototype.setNum 함수를 보자.
num = _num; 이란 코드가 써 있는데, 여기서의 num은 객체에 선언되어 있던 num이 아니라 전역 객체로 num을 새롭게 하나 추가한 것...
그러므로 console.log(obj3.getNum());에서 에러가 나지 않고 실행이 된 것이었다.
오해로 인해 알게된 것.
javascript의 prototype에선 객체에 private(var키워드 사용)으로 선언된 값을 읽지 못한다.
보통들 저런 이유로 객체 내부 변수를 private의 용도로 쓰기 위해 변수 앞에 언더바(_)를 추가한다고 한다. 하지만 저렇게 하면 캡슐화/정보은닉을 어떻게 구현하지???라는 의문이 남는다.
'Javascript & HTML & CSS > pure javascript' 카테고리의 다른 글
javascript 상속 예제 (0) | 2017.01.01 |
---|---|
javascript의 this를 알아보자 (0) | 2016.12.31 |
Naver의 front-end 스터디 자료 (0) | 2016.12.31 |
Javascript 객체지향 개발 (0) | 2016.12.28 |
javascript 성능 최적화 및 브라우저 처리 방법 (0) | 2016.12.21 |