달력

3

« 2024/3 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

'Javascript & HTML & CSS/pure javascript'에 해당되는 글 22

  1. 2017.01.01 javascript의 set/get은 this.xxx로 할까, prototype을 이용할까?

자바스크립트의 메서드는...

객체 내부에 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의 용도로 쓰기 위해 변수 앞에 언더바(_)를 추가한다고 한다. 하지만 저렇게 하면 캡슐화/정보은닉을 어떻게 구현하지???라는 의문이 남는다.

:
Posted by 클레잇