자바스크립트 함수는 호출될 때, 매개변수로 전달되는 인자값 외에 arguments 객체와 this를 암묵적으로 전달받는다.
- Java에서 this는 객체 자기 자신을 참조하는 변수
- Javascript에서 this는 함수 호출 방식에 의해 this에 바인딩할 객체가 동적으로 결정됨
함수 호출 방식
var foo = function () {
console.log(this);
};
- 함수 호출
foo();
// Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}
전역 객체 (global object)는 모든 객체의 유일한 최상위 객체 = window
글로벌 스코프에 선언된 함수는 전역 객체 즉, window의 메소드 window.foo() = foo()
이 경우 this는 전역객체 (window)에 바인딩된다
전역 함수의 내부 함수의 경우, 객체 내 내부 함수, 콜백 함수의 경우에도 전역 객체에 바인딩된다
- 메소드 호출
var obj = { foo: foo };
obj.foo()
// object
// {foo: ƒ}
함수가 객체의 프로퍼티 값일 경우 메소드로서 호출된다
이 경우 this는 해당 메소드를 소유한 객체에 바인딩됨
이렇게 리터럴 방식으로 객체를 생성하면 이 객체의 타입은 Object
- 생성자 함수 호출
var instance = new foo();
// Instance
// foo {}
기존 함수에 new 연산자를 붙여서 호출하면 생성자 함수로 동작
생성자 함수를 호출하면 일단 빈 객체가 생성되고 생성자 함수 내 this는 이 빈 객체를 가리킨다 그리고 빈 객체는 생성자 함수의 프로토타입이 가리지는 객체를 자신의 프로토타입 객체로 설정한다. 이렇게 생성된 객체 내 this로 새로 생성된 객체의 프로퍼티나 메소드를 조작할 수 있다.
생성자 함수 방식은 생성된 객체 프로토타입의 객체 종류가 그 생성자 함수 그대로!
- call apply bind 호출
var bar = { name: 'bar' };
foo.call(bar); // {name: 'bar'}
foo.apply(bar); // {name: 'bar'}
foo.bind(bar)(); // {name: 'bar'}
- apply()
var Person = function (name) {
this.name = name;
};
var foo = {};
// apply 메소드는 생성자함수 Person을 호출한다. 이때 this에 객체 foo를 바인딩한다.
Person.apply(foo, ['name']);
console.log(foo); // { name: 'name' }
apply는 함수를 호출하는 메소드로 , 첫번째 매개변수에 빈 객체를 하나 할당하고 두번째 매개변수에 함수에 전달할 인자를 배열에 담아 전달하고 apply메소드의 주체가 되는 함수를 호출한다. 예시에서는 그게 바로 Person! 이렇게 호출하면 Person 함수의 this는 foo 객체가 된다. 그리고 this객체의 name이라는 프로퍼티에 전달된 인자를 할당한다. 이 때, foo객체는 name이라는 프로퍼티 조차 없는 빈 객체이기 때문에 name 프로퍼티가 동적으로 추가되고 값이 할당된다.
- call()
call 메소드는 apply와 마찬가지로 함수를 호출하지만 함수에 전달할 인자를 배열이 아니라 그냥 각각 하나의 인자로 넘긴다
Person.apply(foo, [1, 2, 3]);
Person.call(foo, 1, 2, 3);
- bind()
함수에 인자로 전달한 this가 바인딩된 새로운 함수를 리턴한다
References