this 키워드
- 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조해야 함.
- 생성자 함수 내부에서는 프로퍼티 또는 메서드를 추가하기 위해 자신이 생성할 인스턴스를 참조해야 함.
this (자기 참조 변수)
- 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요했다.
- 자바나 c++ 같은 클래스 기반 언어 : this는 언제나 클래스가 생성하는 인스턴스를 가리킴.
- 자바스크립트 : this는 함수가 호출되는 방식에 따라 this에 바인딩될 값이 결정됨.
- 전역에서 this는 전역 객체 window를 가리킴
- 일반 함수 내부에서는 전역 객체 window를 가리킴 (strict mode가 적용되면 undefined가 바인딩 됨.)
- 메서드 내부에서는 메서드를 호출할 객체를 가리킴
- 생성자 함수 내부에서는 생성자 함수가 생성할 인스턴스를 가리킴
함수 호출 방식과 this 바인딩
- 동일한 함수도 다양한 방식으로 호출할 수 있음
const foo = function() {
console.dir(this);
};
//1. 일반 함수 호출
foo(); //window
//2. 메서드 호출
const obj = {foo};
obj.foo(); //obj
//3. 생성자 함수 호출
new foo(); // foo{}
//4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출
foo.call(bar);
foo.apply(bar);
foo.bind(bar)();
1. 일반 함수 호출
일반 함수로 호출된 모든 함수(중첩 함수, 콜백 함수 포함) 내부의 this는 전역 객체가 바인딩된다.
var value = 1;
const obj = {
value: 100,
foo() {
console.log("foo's this: ", this); {value:100, foo:f}
//콜백 함수 내부의 this에는 전역 객체가 바인딩됨.
setTimeout(function () {
console.log("callback's this :: ", this); //window
console.log("callback's this.value :: ", this.value); //1
}, 100);
}
};
obj.foo();
- 메서드 내부의 중첩 함수나 콜백 함수의 this 바인딩을 메서드의 this 바인딩과 일치시키기 위한 방법
->1) Function.prototype.apply, call, bind 메서드 활용
->2) 화살표 함수 활용
var value = 1;
const obj = {
value: 100,
foo() {
//bind 함수
console.log("foo's this: ", this); {value:100, foo:f}
setTimeout(function () {
console.log(this.value); //100
}.bind(this), 100);
//화살표 함수 내부의 this는 상위 스코프의 this를 가리킴
setTimeout(() => console.log(this.value), 100);
}
};
obj.foo();
2. apply, call, bind 메서드에 의한 간접 호출
- apply, call의 대표적인 용도 : arguments 객체와 같은 유사 배열 객체에 배열 메서드를 사용하는 경우
- arguments는 배열이 아니기 때문에 Array.prototype.slice와 같은 배열의 메서드를 사용하지 못하나 apply 나 call 메서드로 가능
function convertArgsToArray() {
console.log(arguments);
//arguments 객체를 배열로 변환
const arr = Array.prototype.slice.call(arguments);
console.log(arr);
return arr;
}
convertArgsToArray(1, 2, 3); // [1,2,3]
- bind 메서드는 apply와 bind와 달리 함수를 호출하지 않고,
첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해 반환
-> 메서드의 this와 메서드 내부의 중첩 함수 또는 콜백 함수의 this가 불일치하는 문제를 해결하기 위해 유용하게 사용됨.
function getThisBinding() {
return this;
}
const thisArg = { a:1 };
// bind 메서드는 첫번째 인수로 전달된 thisArg로 this 바인딩이 교체된 getThisBinding 함수를 새로 생성해 반환
console.log(getThisBinding.bind(thisArg)); // getThisBinding
// bind 메서드는 함수를 호출하지 않으므로 명시적으로 호출해줘야 함.
console.log(getThisBinding.bind(thisArg)()); // { a:1 }
