this를 꽉 쥐고 있는 bind 메서드

bind... 단어에서도 감이 오듯이 꽉 물고 안놔줄것같은 녀석이다
this는 this를 사용하고 있는 함수가 어떻게 불리느냐에 따라서 가리키는 값이 달라진다.

• class 내에서 this : 해당 class의 instance
• 메서드 내에서 this : proto-type

let runnerMango= {
	name : "mango",
    finishline : "home",
    runtime : function(){
    	setTimeout(function(){
    	console.log(`${this.name}야 오늘은 ${this.finishline}까지 뛰었구나!`
        )}, 500);	
    }
}
runnerMango.runtime();//야 오늘은 undefined까지 뛰었구나!

여기에서 나오는 결괏값은

야 오늘은 undefined까지 뛰었구나! 라고 나온다.
this.name과 this.finishline이 객체를 받아 잘 나올 것 같지만, setTimeout은 비동기함수로, setTimeout이 실행될 때 이미 runnerMango는 이미 반환된 상태다.
그래서 setTimeout안의 this는 window 객체를 가르킨다.
window.name/window.finishline은 없기 때문에 undefined로 반환된다.

🤫그렇다면 여기서 우리가 의도한대로 this를 사용하려면 어떻게 해야할까?

• 이 때 bind를 사용하면 된다.

let runnerMango= {
	name : "mango",
    finishline : "home",
    runtime : function(){
    	setTimeout(function(){
    	console.log(`${this.name}야 오늘은 ${this.finishline}까지 뛰었구나!`
        )}.bind(this), 500);	
    }
}
runnerMango.runtime();//mango야 오늘은 home까지 뛰었구나!

bind를 setTimeout의 콜백함수에 붙여주고, bind로 새 함수가 생성된다.
bind의 새함수는 runnerMango가 실행되는 시점에 있으므로, bind(this)는
runnerMango를 가르키고, setTimeout의 콜백함수는 bind를 통해 새로운 함수가 된다.

이와 비슷하게, 화살표 함수를 이용해서 this를 고정해주는 방법도 있다.
화살표 함수는 자신을 둘러싼 함수의 this와 같은 값을 가진다.

let runnerMango= {
	name : "mango",
    finishline : "home",
    runtime : function(){
    	setTimeout(()=>{
    	console.log(`${this.name}야 오늘은 ${this.finishline}까지 뛰었구나!`)
        }.bind(this), 500);	
    }
}
runnerMango.runtime();//mango야 오늘은 home까지 뛰었구나!