객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로
묶은 복합적인 자료구조다.
동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저
자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.
다른 언어와 달리 자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩 될 값, 즉 this 바인딩이 동적으로 결정된다.
- 일반함수 호출
- 메서드 호출
- 생성자 함수 호출
- Function.prototype.apply / call /bind
메서드에 의한 간접 호출
const foo = function (){
console.dir(this);
}
//1. 일반 함수 호출
foo(); // this가 window 이다.
//2. 메서드 호출
const obj={foo};
obj.foo(); // this가 obj 이다.
//3. 생성자 함수 호출
// foo 함수를 new 연산자와 함께 생성자 함수로 호출
new foo(); // foo{}
//4. Function.prototype.apply/call/bind 메서드에 의해 간접 호출
const bar ={name:'bar'};
foo.call(bar); // bar
foo.apply(bar); // bar
foo.bind(bar); // bar
1. 일반함수 호출
기본적으로 this에는 전역 객체가 바인딩 된다.
const value = 1;
const obj ={
value:100,
foo(){
console.log("foo's this",this);// {value:100,foo:f}
console.log("foo's this.value",this.value); // 100
//메서드 내에서 정의한 중첩 함수
function bar(){
console.log("bar's this:",this); // window
console.log("bar's this.value",this.value);//1
}
// 메서드 내에서 정의한 중첩 함수도 일반 함수로 호출되면 중첩함수 내부의 this에는 전역 객체가 바인딩 된다.
}
}콜백함수도 일반함수로 호출된다면 콜백함수 내부의 this에도 전역 객체가 바인딩된다. 어떠한 함수라도 일반 함수로 호출되면 this에는 전역 객체가 바인딩 된다.
하지만 이는 문제가 있다. 중첩함수 또는 콜백함수는 외부함수를 돕는 헬퍼함수의 역할을 하므로 외부 함수의 로직을 대신하는 경우가 대부분이다. 하지만 외부함수인 메서드와 중첩함수 또는 콜백함수의 this가 일치하지 않는 다는것은 헬퍼함수로 동작하기 어렵게 만든다.
메서드 내부의 중첩함수나 콜백함수의 this 바인딩을 메서드의 this 바인딩과 일치시키기 위한 방법은 다음과 같다.
const value = 1;
const obj={
value:100,
foo(){
//콜백 함수에 명시적으로 this를 바인딩한다.
setTimeout(function(){
console.log(this.value);
}.bind(this),100);
}
}const value = 1;
const obj ={
value: 100,
foo(){
// 화살표 함수 내부의 this는 상위 스코프의 this를 가리킨다.
setTimeout(()=>console.log(this.value),100) // 100
}
}2. 메서드 호출
메서드 내부의 this에는 메서드를 호출한 객체, 즉 메서드를 호출할 때 메서드 이름 앞의 마침표 연산자 앞에 기술한 객체가 바인딩 된다.
const person ={
name :"Lee",
getName(){
return this.name;
}
};
// 메서드 getName을 호출한 객체는 perosn이다.
console.log(person.getName()); // Lee
// getName 프로퍼티가 가리키는 함수 객체는 person 객체에 포함된 것이 아니라
// 독립적으로 존재하는 별도의 객체다. getName 프로퍼티가 함수 객체를 가리키고 있을 뿐이다.
// getName => function object
즉 getName 메서드는 다른 객체의 프로퍼티에 할당하는 것으로 다른 객체의 메서드가 될 수도 있고 일반 변수에 할다앟여 일반함수로 호출될 수도 있다.
const person ={
name :"Lee",
getName(){
return this.name;
}
};
const anotherPerson ={
name:"Kim"
}
//getName 메서드를 anotherPerson 객체의 메서드로 할당.
anotherPerson.getName = person.getName;
// getName 메서드를 호출한 객체는 anotherPerson이다.
console.log(anotherPerson.getName()); // Kim
// getName메서드를 변수에 할당
const getName = person.getName;
console.log(getName()); // ""
// 일반 함수로 호출된 getName 함수내부의 this.name은 브라우저 환경에서 window.name과 같다.프로토타입 메서드 내부에서 사용된 this도 일반 메서드와 마찬가지로 해당 메서드를 호출한 객체에 바인딩 된다.
3. 생성자 함수 호출
생성자 함수 내부의 this에는 생성자 함수가 바인딩 된다.
4. Function.prototype.apply/ call/ bind 메서드에 의한 간접호출
이들 메서드는 모든 함수가 상속받아 사용할 수 있다.
apply, call 메서드의 본질적인 기능은 함수를 호출하는 것이다. apply와 call 메서드는 함수를 호출하면서 첫번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩한다.
function getThisBinding(){
return this;
}
// this로 사용할 객체
const thisArg= {a:1};
console.log(getThisBinding()); // window
console.log(getThisBinding.apply(thisArg)); // {a:1}
console.log(getThisBinding.call(thisArg)); // {a:1}apply와 call 메서드의 대표적인 용도는 arguments 객체와 같은 유사 배열 객체에
배열 메서드를 사용하는 경우다.
arguments 객체는 배열이 아니기 때문에 Array.prototype.slice 같은 배열의 메서드를 사용할 수 없으나 apply와 call 메서드를 이용하면 가능하다.
function convertArgsToArray(){
console.log(arguments);
//arguments 객체를 배열로 변환
//Array.prototype.slice를 인수없이 호출하면 배열의 복사본을 생성한다.
const arr = Array.prototype.slice.call(arguments);
console.log(arr);
return arr;
}
convertArgsToArray(1,2,3); // [1,2,3]bind 메서드는 함수에 this로 사용할 객체를 전달한다.
function getThisBinding(){
return this;
}
// this로 사용할 객체
const thisArg= {a:1};
//bind 메서드는 함수에 this로 사용할 객체를 전달한다.
console.log(getThisBinding.bind(thisArg)); // getThisBinding
//bind 메서드는 함수를 호출하지는 않으므로 명시적으로 호출해야 한다.
console.log(getThisBinding.bind(thisArg)()); // {a:1}bind 예시
const person ={
name : "Lee",
foo(callback){
//1
setTimeout(callback,100);
}
};
person.foo(function(){
console.log(`Hi! my name is ${this.name}`); // 2
// 일반 함수로 호출된 콜백함수 내부의 this.name은 window.name과 같다.
// 브라우저 환경에서 window.name은 브라우저 창의 이름을 나타내는 빌트인 프로퍼티이며
// 기본값은 "" 이다.
})person.foo의 콜백함수가 호출되기 이전인 1의 시점에서 this는 foo 메서드를 호출한 객체 즉 person 객체를 가리킨다.
person.foo의 콜백함수가 일반함수로서 호출된 2의 시점에서 this는 전역객체 window를 가리킨다.
외부 함수 person.foo 내부의 this와 콜백함수 내부의 this가 상이하면 문맥상 문제 발생 => this를 일치시켜야 한다. => bind 메서드 활용
const person = {
name: "Lee",
foo(callback) {
//1
setTimeout(callback.bind(this), 100);
},
};
person.foo(function () {
console.log(`Hi! my name is ${this.name}`); // Hi my name is Lee
});