JS this (2018.10.06)

JavaScript에서의 this

In most cases, the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called
- 출처 : MDN( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this )

자바스크립트에서 함수의 this키워드는 다른 언어에서의 this와는 조금 다르다고 한다. 대부분의 경우에 this는 함수가 어떻게 불렸냐에 따라 결정되는데, 실행중 할당에 의해 정해질 수 없고, 함수가 호출될 때마다 다르다.

말이 조금 어렵다. C++이나 Java에서와 같이 this값이 현재 객체를 지칭하는것이 아니라, JavaScript의 this는 실행시의 context를 말하는 것이라고 생각하면 될 것 같다.

간단하게 예를 들어 보면,

const showThis = function() {
  console.log(this);
}
showThis(); // window
const foo = { showThis };
foo.showThis(); // foo

실행시의 context에 따라 this값이 바뀌는 것을 확인할 수 있다.
showThis()는 사실 window.showThis()와 같아 실행시의 context가 window가 나오는 것이고, foo.showThis()는 실행시의 context가 foo이므로 foo가 나오는 것이다.

Function.prototype.bind

이렇게 this값이 실행 context에 따라 변경됨으로 인해 생기는 불편함들을 해소하기 위해 bind라는 함수가 ES5부터 도입된 것 같다. ( 지극히 내 생각이다.)

bind함수는 간단하게 말하면 this를 지정할 수 있도록 해준다.

const showThis = function() {
  console.log(this);
};
const foo = { };
const bar = {
  showFoo: showThis.bind(foo);
};
bar.showFoo(); // foo

첫 번째 인자로 this가 될 값을 넘기면 위에서 볼 수 있듯이 실행 context인 bar가 아닌, 우리가 bind함수의 첫 번째 인자로 넘긴 bar가 나오게 된다.

bind의 두 번째 이후 인자로 바인딩할 함수의 파라미터를 미리 설정할 수도 있다.

Arrow Function

ES6에서 도입된 화살표 함수( () => { } )를 사용하면 this값이 현재 객체를 지칭하도록 할 수 있다. (정확하게는 바로 바깥의 함수 또는 객체)

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++;
  }, 1000);
}
var p = new Person();

setInterval내부의 callback함수에서 this는 바로 바깥의 함수 Person을 가리키므로 내가 원하는대로 잘 돌아간다!

In React…

withoutBind — 
문제가 없을 것 처럼 보이나, onClick함수(withoutBind)가 호출 될 때의 this는 window를 의미하기 때문에 원하는대로 동작하지 않음.

withBind — 
constructor에서 함수를 바인딩함으로써 this의 값이 BindInReact가 된다.
따라서 원하는대로 동작.

withArrow —
arrow function을 이용하여 작성한 함수이다.
따로 bind해주지 않아도 바로 바깥의 객체(BindInReact)를 가리키므로 원하는대로 동작.