This

Seunghyunkim1·2020년 7월 1일
0

프론트엔드

목록 보기
2/8

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는 어떤의미를 갖는가?

함수안에서 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>');
}

0개의 댓글