몽탁이의 개발일기
this 본문
this는 객체를 지칭하는 키워드입니다.
객체를 지칭하는 시점이 상황에 따라 다르기 때문에 주의하여야 합니다.
function func(){
if(window === this){
console.log('window === this');
}
}
func();
위 예제의 함수를 호출하면 'window === this'가 출력이 됩니다.
그 이유는 앞에 전역객체의 내용처럼 모든 객체는 전역 객체의 속성으로 선언되기 때문입니다.
var o ={
func: function(){
if(o === this){
console.log('o === this');
}
}
}
o.func();
이번에는 o라는 객체 안에 함수를 정의하여 해당 함수를 호출하게 되면 his는 o라는 객체를 가리키게 됩니다.
이렇듯 this는 호출하는 함수가 어디에 소속되어있느냐에 따라 가리키는 객체가 달라집니다.
명시적으로 객체 지정하기
위와 같은 경우에는 유연하게 사용하기가 어렵습니다. 그래서 apply, call, bind와 같은 전역 객체의 메소드를 사용하여
사용자가 this를 명시적으로 바꿔줄 수 있습니다.
var o={};
var p={};
function func(){
switch(this){
case o:
document.wirte('o<br/>');
case p:
document.wirte('p<br/>');
case window:
document.wirte('window<br/>');
}
}
func();
func.apply(o);
func.apply(p);
결과)
window
o
p
func()로 호출하게 되면 func의 this는 window객체를 가리키고 apply를 사용하여 호출하게 되면 인자 넘기는
객체가 this가 되어 두 번째 세 번째 결과가 나오게 됩니다.
생성자에서의 this
var funcThis = null;
function Func(){
funcThis = this;
}
var o1 = Func();
if(funcThis === window){
document.write('window </br>');
}
var o2 = new Func();
if(funcThis === o2){
document.wirte('o2 <br/>');
}
생성자를 생성하지 않고 o1에 넣어주면 this는 window객체를 가리키게 되어 window가 출력됩니다.
new를 사용하여 생성자를 통해 o2에 넣어주게 되면 this는 o2를 가리키게 되고 o2가 출력됩니다.