[Javascript] this

this

 

함수 내에서 함수 호출 맥락(context)

 

맥락이라는 것은 상황에 따라서 달라진다는 의미인데, 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라집니다. this 라는 키워드는 함수 안에서 사용되는 키워드이며, 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 합니다. this는 함수 안에서만 사용될 수 있으며 변수 안에 담겨있는 값의 의미는 그 함수를 어떻게 호출했느냐에 따라 달라집니다.

 

함수의 호출

기본적으로 this는 전역 객체에 바인딩 된다. 전역 함수는 물론 내부 함수의 경우도 this는 전역 객체에 바인딩 됩니다. 

function foo() {
	console.log("foo's this: ", this); // window
  function bar() {
  	console.log("bar's this: ", this); // window 
  }
  bar();
}
foo();

콜백 함수의 경우에도 this는 전역 객체에 바인딩 됩니다.

var value = 1;

var obj = {
  value: 100,
  foo: function () {
    setTimeout(function () {
      console.log("callback's this: ", this); // window
      console.log("callback's this.value: ", this.value); // 1
    }, 100);
  },
};

obj.foo();

 

메소드의 호출

객체의 소속인 메소드의 this는 그 객체를 가르킵니다.

function foo() {
  this.check = function () {
    console.log("this is", this);
  };
}

var f = new foo();
f.check(); // this is foo {check: ƒ}

 

생성자와 this

자바스크립트 생성자 함수는 객체를 생성하는 역할을 합니다. 기존 함수에 new를 붙여서 호출하면 해당 함수는 생성자 함수로 동작합니다.

 

일반 함수에 new를 붙여서 호출해도 생성자 함수처럼 동작할 수 있기 때문에 일반적으로 생성자 함수는 첫글자를 대문자로 합니다.

생성자 함수가 생성하는 객체로 this가 바인딩 됩니다.

function Person(name) {
  this.name = name;
}

var kim = new Person("kim");

console.log(kim.name); // {name: kim}

 

apply / call / bind 호출

this에 바인딩 되는 객체는 함수가 어떻게 호출되는지에 따라 자바스크립 엔진이 결정하는데, 이러한 방식 말고 this를 특정 객체에 명시적으로 바인딩하는 방법이 apply, call 입니다.

var Person = function (name) {
  this.name = name;
};

var foo = {};

// apply 메소드는 생성자함수 Person을 호출한다. 이때 this에 객체 foo를 바인딩한다.
Person.apply(foo, ['name']);
console.log(foo); // { name: 'name' }

// call()
Person.call(foo, 'name')
console.log(foo) // { name: 'name' }

// bind()
Person.bind(foo, 'name')()
console.log(foo)  // { name: 'name' }

 

apply의 경우는 두 번째 매개변수를 배열 형태로 넣는다는 차이점 빼고는 call과 동일합니다.

그러나 call(), apply()로 변경한 this 객체를 영구적으로 가리키도록 할 수는 없습니다. 이 때에 사용하는 것이 bind입니다.

bind는 함수에 인자로 전달한 this가 새로운 함수를 리턴합니다. apply, call 과는 달리 함수를 실행하지는 않기 때문에 명시적으로 함수를 호출할 필요가 있습니다.