JS에서는 선언할때 결정되는 값, 호출될때 결정되는 값이 있다.
this의 값은 함수를 호출하는 방법에 의해 결정된다.
this를 예외적으로 호출과 무관하게 고정시킬수 있는 방법bind:
ES5에서 함수의 this 값이 함수가 어떻게 호출되었는지 상관없이 설정(고정)할 수 있는 메소드
var someone = {
name: 'codejung',
whoAmI: function(){
console.log(this);
}
};
someone.whoAmI() //console => name: "codejung", whoAmI: f
var mywhoAmI = someone.whoAmI;
mywhoAmI(); //window가 나옴, syntax상 동일 하지만
//호출하는 방법이 다르기 때문
호출을 누가했는가?
someone.whoAmI 는 someone에서 직접적으로 접근
mywhoAmI는 window 전역에서 접근
var btn = document.getElementById('btn');
//click이 일어나면 console에 <button>이 찍힌다, 호출 방법에따라 다르다
//<btton>에 함수만 넘긴거랑 같단 의미다
bth.addEventListner('click', someone.whoAmI);
bth.addEventListner('click', mywhoAmI);
//둘다 결과 동일 //<button>에 함수를 넘겨주는 역할만
누가 호출을 했는가? === this
this를 예의적으로 호출하는 것과 무관하게 묶어주는것 bind
var bindedWhoAmI = myWhoAmI.bind(someone); //someone을 무조건 this로서 고정(받아오겟다.)
var btn = document.getElementById('btn');
bth.addEventListner('click', bindedWhoAmI);
//console에 <button>이 아니라 {name: "codejung", whoAmI: f} 나옴
// someone이 this로서 bind 됐다?
bindedWhoAmI(); //결과동일
함수안에서 this는 그 함수가 소속되어있는 객체를 가르킨다
var funcThis = null;
function Func(){
funcThis = this;
}
var o1 = Func();
if(funcThis === window){
document.write('window </br>');
}
//생성자를 호출하게되면, 내부적으로 비어있는 객체를 만들고, 비어있는 객체가
//생성자안에서 this가 된다?
var o2 = new Func();
if(funcThis === o2){
document.write('o2 </br>');
}