What is 'this'

등장할 때 마다 아리송했던 'this' 파헤쳐보자.

this는 함수를 호출할 때 결정된다.

자바스크립트에서 this는 실행 컨텍스트가 생성될 때 결정되는데,
실행 컨텍스트는 함수를 호출할 때 생성되므로
결국 함수를 호출할 때 생성된다고 볼 수 있다.

전역공간에서의 this

전역공간에서 this는 전역 객체를 가리킨다.
브라우저 환경에서

this === window // true

메서드 내부에서의 this

함수를 호출하는 방법

1. 함수로서 실행
2. 메서드로서 실행

두가지 모두 미리 정의한 동작을 실행하는 코드지만 '독립성' 측면의 차이가 있다.
함수는 그 자체의 독립적인 기능을 수행하지만 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행.

var func = function (x) {
  console.log(this, x);
};

func(1); // window {...} 1

var obj = {
  method = func
};
obj.method(2); // {method: f} 2

같은 함수를 참조했지만, 변수에 담아 호출한 경우와 프로퍼티에 할당해서 호출한 경우 this가 다르다.

메서드 내부에서의 this에는 호출한 주체에 대한 정보가 담긴다.
함수를 메서드로서 호출하는 경우 호출 주체는 함수명(프로퍼티명) 앞의 객체다.
something.method()이라는 메서드를 호출했다면 something이 this가 된다.

함수 내부에서의 this

함수로서 호출할 경우 this가 지정되지 않는다.(호출 주체가 없기 때문)
=> this가 지정되지 않는 경우에는 전역객체가 할당 된다.

감 잡기 퀴즈, (1) ~ (3) this가 가리키는 것은?

var obj1 = {
  outer: function (){
    console.log(this); // (1)
    var innerFunc = function (){
      console.log(this); // (2) (3)
    }
    innerFunc();
    
    var obj2 = {
      innerMethod: innerFunc
    };
    obj2.innerMethod(); // (3)
  }
};
obj1.outer();

// (1) : obj1, (2) : window(전역객체), (3) : obj2

(2)의 경우 함수로 호출하였으므로 전역객체를 가리키게 됨.

(2)의 경우에 전역객체가 아니라 직전 컨텍스트의 this를 바라보게 하려면?

var obj1 = {
  outer: function (){
    console.log(this); // {outer : f}
    var innerFunc1 = function (){
      console.log(this);
    }
    innerFunc1();
    
    var self = this;
    var innerFunc2 = function() {
      console.log(self); // {outer: f}
    };
    innerFunc2();
  }
};
obj1.outer();

// _this, that, self 등 다양한 변수명으로 사용함.

ES6에서는 화살표 함수가 도입 되었다.
화살표 함수는 this 바인딩을 하지 않기 때문에 상위 스코프의 this를 그대로 활요할 수 있다.
즉, 위 처럼 별도의 변수를 쓰지 않아도 직전 컨텍스트의 this를 받을 수 있다는 이야기

생성자 함수에서의 this

생성자 함수로서 호출된 this는 새로 만들어진 구체적인 인스턴스 자신을 가리킨다.

var Cat = function (name, age) {
  this.bark = '야옹';
  this.name = name;
  this.age = age;
  
var choco = new Cat('초코', 7);
console.log(choco); // Cat { bark: '야옹', name: '초코', age:' 7 }

this를 직접 바인딩하기

call 메서드

Function.prototype.call(thisArg[, arg1[, arg2[, ...]]])

var func = function (a,b,c){
  console.log(this, a, b, c);
};

func(1,2,3); // Window{ ... } 1 2 3
func.call({x: 1}, 4, 5, 6); // {x: 1} 4 5 6

apply 메서드

Function.prototype.apply(thisArg[, argsArray])

var func = function (a,b,c){
  console.log(this, a, b, c);
};

func(1,2,3); // Window{ ... } 1 2 3
func.apply({x: 1}, [4, 5, 6]); // {x: 1} 4 5 6

응용) 생성자 내부에서 다른 생성자를 호출

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
}
function Student(name, gender, school){
  Person.call(this, name, gender);
  this.school = school;
  
var by = new Student('보영', 'female', '단국대');

bind 메서드

call 메서드와 같은 기능이지만 즉시 호출하지 않고 새로운 함수를 반환하기만 하는 메서드.

var func = function (a,b,c,d){
  console.log(this,a,b,c,d);
};
func(1,2,3,4) // Window {...} 1 2 3 4

var bindFunc1 = func.bind({x:1});
bindFunc(5,6,7,8) // {x:1} 5 6 7 8

---

정리

• 전역공간에서의 this는 전역객체를 참조한다.
• 특정 함수를 메서드로서 호출한 경우 this는 메서드명 앞의 객체를 참조한다.
• 어떤 함수를 함수로서 호출한 경우 this는 전역객체를 참조한다.
• 콜백 함수 내부에서의 this는 해당 콜백함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우 전역객체를 참조한다.
• 생성자 함수에서의 this는 생성될 인스턴스를 참조한다.