this

나는 this가 javascript의 encapsulation로 가는 시작점이라고 생각한다.

 

javascript에서 this가 어려운 이유는 javascript는 prototype 타입 언어이며 까다로운 scope 정책 때문이라고 생각한다.

자바 같은 경우는 private 접근지정자로 명확한 scope와 encapsulation을 지원하기 때문에 this 때문에 혼란스러울 일이 없다.

 

public class Clazz {

  private String foo;

  private int bar;

  public String getFoo() {

    return this.foo;

  }

  public int getBar() {

    retrun this.bar;

  }

} // scope가 너무 명확해 this가 헷갈릴 여지가 없다.

 

this에 대해 알아갈때는 this 가 반드시 무엇인지 알아야한다.

 

1. this 는 무엇인가?

2. this가 상황에 따라 바뀌는 대표적인 예외상황들 (new, method, call, apply, bind etc..)

3. call/apply/bind 의 본연 기능은 this의 변경이 아니다. (call/apply/bind 는 왜 이름이 call/apply/bind 인지 생각해봐야한다)

4. this + encapsulation

 

나같은 경우 멀리멀리 돌아간 케이스이다.

this 본연의 기능을 먼저 알아챘다면 정말 쉽게 갔을텐데 예외상황과 call/apply/bind 를 습득하고나서야 문득 깨닳았다.

심지어 난 java 개발자인데 ... 

 

this 는 무엇일까?

인스턴스 자신이다.

java 개발자들은 바로 알것이다. 너무 명확하기 때문에 설명할 필요가 없다.

 

나는 예외상황에 집중한 나머지 이 것을 놓치고 있었고 this 를 어렵게만 생각했었다. 이것만 인지하면 this에 대한 진입장벽이 낮아진다.

 

문제는 javascript 에서 상황에 따라 같은 코드의 this가 인스턴스 자신일때도 있고 window(global) 일때도 있다.

 

this가 상황에 따라 바뀌는 대표적인 예외상황들 (안타깝게 이게 다가 아니다...)

  - new

  - method

  - call

  - apply

  - bind

  - arrow function (es6)

 

각 예는 최근 this 에 대한 끝판왕 글들이 있어 링크 , 링크 해놓는다. (마침 나도 this에 대해 쓰고 있었는데... 이 글들을 보고 기가 죽어 요 몇일간 글을 못썼다.)

 

위 예외상황에 대해 습득하다가 정말 몇해동안 이해못했던 call/apply/bind 에 대해 알게 된 것이 있다. (당연히 this 를 제대로 모르니)

call/apply/bind 의 본연 기능은 this를 변경하기 위한 것이 아니다

이에 대한 내용은 따로 작성할 예정이다.

 

여기까지 습득 이후에도 나는 this가 들어간 코드가 자주 헷갈리고 function 내 변수는 유의깊게 보는 편이며 function 안에는 꼭 console.dir(this); 를 확인하고 있다.

 

아래는 encapsultaion 과 관련있는 this 의 특성이다. 

new 로 생성된 인스턴스라도 내부 함수의 this는 window

function Outer() {

  console.log(`outerThis: ${this}`); // Object
  
  function inner() {
    console.log(`innerThis: ${this}`); // window
  }
  
  inner();
}

new Outer();

 

prototype + this

function Car() {
  var speed = 260;
  this.name = 'bmw320d';
};

Car.prototype.drive = function() {
 console.log(this.name);
 //console.log(speed); // speed는 함수 레벨 블럭 scope 이므로 접근할 방법이 없다.
};

new Car().drive();

* 물론, 새로운 인스턴스가 생성될때마다 speed와 name이 불필요하게 생성되므로 prototype 내부에 변수를 선언하는 패턴도 있다. 

 

현재 내 능력 안에서 this의 백미 중의 하나는 생성자패턴 + 모듈 패턴 (+ 빌더 패턴) 이라고 생각한다. 

this 를 잘 쓰고 싶다.