자바스크립트의 This
JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다. 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. ... 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다
출처 : MDN공식문서
💯 This의 핵심
this의 핵심은 호출한 방법에 의해서 결정된다! 이게 제일 중요한 핵심요소이다.
아래의 예제코드를 보면서 이해하자.
const someone = {
name: 'devicii',
whoAmI: function () {
console.log(this)
},
}
someone.whoAmI()
//{name: 'devicii' whoAmI : f}
우리가 예측할 수 있듯이 객체의 값이 나온다.
만약 여기서 코드를 더 추가하면 어떻게 될까?
const myWhoAmI = someone.whoAmI
myWhoAmI()
//Window{ ...}
우리의 예상과는 다르게 Window가 나왔다 !
위의 코드에서 myWhoAmI( )의 값이 Window객체가 나온 이유는 위에서 읽은 문서의 내용과 동일하다. 코드를 다시 살펴보면 someone.whoAmI()의 호출은 someone에서 이루어졌지만,
myWhoAmI()의 코드는 보면 호출하는 위치가 글로벌에 있다. 즉 호출한 위치가 글로벌 위치라서 브라우저의 기본값인 Window객체가 호출된다.
그렇다면 이벤트 객체에 할당하는 것은 어떨까?
const button = document.querySelector('#button')
button.addEventListener('click', () => {
someone.whoAmI()
})
button.addEventListener('click', () => {
myWhoAmI()
})
//<button id="btn">...</button>
//<button id="btn">...</button>
상단의 코드의 결과는 this가 호출되는 곳이 버튼이기 때문에 결과가 이렇게 나왔다.
핵심은 호출한 놈 === this라는 공식이 성립된다!
❔ bind()는 또 뭐야
const bindedWhoAmI = myWhoAmI.bind(someone)
button.addEventListener('click', () => {
console.log(bindedWhoAmI)
})
// {name : "devicii", whoAmI : f}
또 여기서 bind()함수를 사용하면 신기하게도 또 someone의 객체값이 나온다.
bind함수는 예제처럼 이렇게 this의 호출과 무관하게 값을 묶어줄 수 있게 해주는 역할이다.
정리
자바스크립트에서는 선언할 때 결정하는 것과 호출할 때 결정하는 것. 이렇게 두 가지 방식이 있다.
this는 후자이다. 그리고 호출과 무관하게 값을 엮어주는 함수로는 bind()를 지원한다.
this의 값은 결국 함수를 호출한 방법에 따라 달라진다.
참고자료
