자바스크립트 this 바인딩

다른 프로그래밍 언어와 마찬가지로 자바스크립트에서도 this를 잘사용하면 코딩이 쉬워진다. 하지만 this가 동작하는 방식이 다양하여 초기에 개념을 잘못잡으면, 스크립트가 오작동할 수 있다. this를 사용하는 함수가 어떤 방식으로 호출되느냐에 따라 this에 다른 객체가 바인딩된다.

객체의 메서드(프로퍼티)로서 함수가 호출될때

이는 어떤 객체나 멤버 메서드로서 호출되는 경우 객체가 this에 바인딩 된다.

아래 코드가 콘솔에 무엇을 출력할지 생각해보자.

var obj = {
  name: 'ccw',
  getName: function(){ console.log(this.name); }
}
obj.getName();

단순히 함수 이름으로 호출될때

어떤 실행 문맥에 선언된 함수가 바로 호출될 경우 this에 전역 객체(window, global)가 바인딩된다.

var name = 'ccw';
function getName(){
  console.log(this.name);
}
getName();

생성자로서 함수가 호출될때

함수가 생성자로서 호출되면 생성될 객체 자기자신이 this에 바인딩된다.

function Student(){
  this.name = 'ccw';
}
var s = new Student();
console.log(s.name);