this 키워드

1. this란?

자바스크립트의 this 키워드는 사용하는 방법에 따라 가리키는 대상이 다르다.
Prototype에서의 this, method의 this, 함수의 this 등 헷갈리고 어렵고 자꾸 틀리는 내용이라 정리를 해두고 이해가 안 되더라도 계속 보려고 한다.

‘This’

자바스크립트에서 this에 대해 알아둬야 하는 경우는 5가지가 있다.

1. Global Scope에서 사용될 때 this는 ‘전역객체‘를 가리킨다. (Window 객체)
   
2. 함수에서 사용될 때의 this는 ‘전역객체‘를 가리킨다. (Window 객체)
   
3. 객체에 속한 메소드에서 사용될 때의 this는 ‘메소드가 속한 객체‘를 가리킨다.
   
4. 객체에 속한 메소드의 내부 함수에서 사용될 때 this는 ‘전역객체‘를 가리킨다. (Window 객체)
   
5. 생성자에서 사용될 때, this는 이 생성자로 인해 생성된 ‘새로운 객체‘를 가리킨다. (인스턴스)
   

각각의 경우에 대해 코드를 정리해보았다.

1. Global Scope에서 사용될 때 this는 전역객체를 가리킨다. (Window객체)

1
2
3
var func = {}; // 객체생성
this === window; // true
thie === func; // false

global scope에서 this와 window(전역객체)를 비교하면 ‘true‘를 반환한다.
global scope 자체가 전역(window)이므로 전역변수와 함수들은 모두 전역객체에 속한다.

2. 함수에서 사용될 때도 this는 전역객체를 가리킨다. (Window객체)

1
2
3
function func() {
  console.log(this === window); // true
}

1번과 마찬가지로 global scope가 전역객체이기 때문에 함수는 전역객체의 메소드와 같다.
( alert() === window.alert() ) this는 자신이 속한 메소드를 가리키므로 함수의 this는 window다. 따라서 위의 코드는 ‘true‘를 출력한다.

3. 객체에 속한 메소드에서 사용될 때 this는 메소드를 호출한 객체를 가리킨다.

1
2
3
4
5
6
7
8
9
10
11
var obj = {
  func: function() {
    if (this === window) {
      console.log('this는 window');
    } else if (this === obj) {
      console.log('this는 obj');
    }
  }
};

obj.func(); // this는 obj

메소드를 가지고있는 객체를 생성했다. 이 객체의 메소드인 func를 실행해보면 ‘this는 obj’를 출력한다.
따라서 객체에 있는 메소드의 this는 자신이 속한 객체를 가리킨다.

4. 객체에 속한 메소드의 내부함수에서 사용될 때 this는 전역객체를 가리킨다. (Window객체)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var obj = {
  func: function() {
    function inner() {
      if (this === window) {
        console.log('this는 window');
      } else if (this === obj) {
        console.log('this는 obj');
      }
    }
    inner();
  }
};

obj.func(); // this는 window

3번과 헷갈리면 안 된다. obj의 메소드의 this는 obj를 가리키지만 메소드 안의 함수는 스코프가 달라진다.
inner함수의 this는 window다. 내부함수에서 this를 사용할 땐 주의해야 한다.
내부함수에서 자신이 속한 객체를 가리키는 this가 필요할 땐 보통 변수에 담아 그 변수를 사용하는 방법을 취한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {
  func: function() {
    var that = this;
    function inner() {
      if (that === window) {
        console.log('that은 window');
      } else if (that === obj) {
        console.log('that은 obj');
      }
    }
    inner();
  }
};

obj.func(); // that은 obj

또는 bind를 이용해서 this를 넘기는 방법도 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var obj = {
  func: function(){
    function inner(){
      if(this === window){
        console.log('this는 window');
      } else if (this === obj){
        console.log('this는 obj');
      }
    }.bind(this);
    inner();
  }
}

obj.func(); // this는 obj

5. 생성자에서 사용될 때, this는 생성자로 부터 생성된 새로운 객체를 가리킨다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Obj() {
  this.val = this;
  this.func = function() {
    if (this === window) {
      console.log('this는 window');
    } else if (this === Obj) {
      console.log('this는 Obj');
    } else {
      console.log('this는 other Object');
    }
  };
}

var temp = new Obj();
temp.func(); // this는 other Object

자바스크립트에 class의 개념이 생긴 지 오래되지 않았다. 그 전까진 함수를 class처럼 사용했고 함수가 생성자 역할을 해서 new 키워드로 인스턴스를 만들 수 있었다.
new Obj()로 새로운 객체를 생성하면 this는 window나 생성자 함수가 아닌 인스턴스를 가리킨다.
이 부분은 temp.val === temp를 했을 때 true가 나오는지 확인하면 된다.

function(){}의 형태에서는 this가 이렇게 구분이 되지만 화살표 함수에서의 this는 또 다르다.
이 부분은 화살표 함수를 정리할 때 같이 하는 걸로~!