자바스크립트 this

자바스크립트 this

자바스크립트에서의 this는 Java와 같은 언어에서의 this와 그 의미가 다르다.

Java에서의 this는 인스턴스 자신을 가리키는 참조변수 이지만 자바스크립트에서는 해당 함수의 호출 방식에 따라 this에 바인딩 되는 객체가 다르다.

함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고 함수가 어떻게 호출 되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

함수 호출

function f1() {
  console.log(this); //window
  function f2() {
    console.log(this); //window
  }
  f2();
}
f1();

기본적으로 this는 전역 객체에 바인딩 되는데 전역 함수가 아니라 내부함수여도 그렇다.

내부함수가 일반함수, 메소드, 콜백함수 어디에서 선언 되었든지 this는 전역 객체를 바인딩한다.

메소드 호출

var obj = {
    f1: function() {
        console.log(this);
    }
}

obj.f1(); //obj

함수가 객체의 프로퍼티 값이면 메소드로서 호출되며 메소드 내부의 this는 해당 메소드를 호출한 객체에 바인딩 된다.

생성자 함수 호출

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

var person = new Person("kim");
console.log(kim);

new 연산자를 사용하여 생성자 함수를 호출하면 this 바인딩이 메소드나 함수 호출 때와는 다르다.

생성자 함수가 실행되기 전에 빈 객체가 생성되고 생성자 함수에서 사용되는 this는 이 빈 객체를 가리킨다.

그리고 빈 객체는 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 설정한다.

일반 함수를 호출하면 this는 전역객체에 바인딩 되지만 new 연산자와 함께 생성자 함수를 호출하면 this는 생성자 함수가 암묵적으로 생성한 빈 객체에 바인딩 된다.

var obj = {
  f1 : function() {
    var that = this;
    console.log(this); // obj
    
    function f2() {
      console.log(this); //window
      console.log(that); //obj
    }
    f2();
  }
};

obj.f1();

apply, call, bind 호출

함수가 어떻게 호출 되었는지에 따라 자바스크립트 엔진에 의해서 this에 바인딩될 객체가 결정된다.

자바스크립트 엔진에 의해서 암묵적 this 바인딩 이외에 명시적으로 바인딩 할 수 있다.

이것을 가능하게 하는 메소드가 apply, call 이다.

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

var f1 = {};

Person.apply(f1, ['name']);

console.log(f1); // { name: 'name' }

apply의 첫번째 매개변수에는 함수 내부의 this에 바인딩할 객체를, 두번째 매개변수에는 함수에 전달할 argument의 배열을 전달한다.

이러면 Person 함수의 this는 foo 객체가 된다.

this에 바인딩된 foo 객체에는 name 프러퍼티가 없기때문에 동적으로 추가되고 두번째 매개변수로 전달한 인수를 name에 할당한다.

Person.apply(foo, [1, 2, 3]);

Person.call(foo, 1, 2, 3);

call메소드는 apply와 기능은 같지만 두번째 인자로 배열을 넘기던 것을 각각 하나의 인자로 넘긴다는 차이가 있다.