Javascript : this

😶‍🌫️ this란?

현재 코드를 실행하는 개체를 나타낸다. 현재 기능을 실행 중인 개체를 참조한다.

참조되는 함수가 일반 함수인 경우 this는 전역 개체를 참조한다.

참조되는 함수가 개체의 메서드인 경우에는 개체 자체를 참조한다.

 

😶‍🌫️ 암시적 바인딩

상황에 따른 this 바인딩을 암시적인 this 바인딩이라고 한다.

사용자가 생각하는것과 다르게 호출될 수도 있고 암시적인 부분이 많다.

그래서 예측하기 어렵고 스코프와 실행되는 시점에 따라서 많은것들이 바뀔수있다.

 

1. 전역 공간에서 this는 window를 바라본다.

2. 함수에서의 this는 window를 가리킨다. = 전역 공간을 가리킨다. 

3. method에서의 this는 함수랑 다르게 호출되는 대상의 객체를 바라보고 있다.

 

😶‍🌫️ 명시적 바인딩

자바스크립트의 var 키워드를 쓰면 window 객체에 박히기 때문에 전역객체에 속해버려서 굉장히 불안하다.

누구나 수정할 수 있는 객체이자 값이여서 불완전하다. 

그래서 예시에는 const가 사용되었다.

 

1. call : 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출한다.

2. apply : 배열을 인자로 받을 수 있다. 원본 함수가 배열을 argument로 취해서 활용할 수 있을때 사용할 수가 있다.

3. bind : bind 메소드가 호출되면 새로운 함수를 생성한다. 

위 세가지를 사용해서 this를 고정시켜서 묶어놓고 사용할 수 있다.