javascript - this 의 동작방식 feat. call, bind, apply

스크랩,

✍️ 간략한 정의를 이해하고 ref를 보자

this 의 4가지 동작 :
this의 첫번째 동작 방식은, this가 전역 객체(window)를 context 객체로 갖는 것

this의 두번째 동작 방식 - 암시적 바인딩 :
어떤 객체를 통해 함수가 호출된다면 그 객체가 바로 this의 context 객체가 됨
결론적으로 this를 그냥 사용하면 암시적으로 전역 객체에 바인딩이 되는 것 입니다.

this의 세번째 동작 방식 - 명시적 바인딩
함수(함수 객체)는 call, apply, bind 메소드를 가지고 있는데, 첫번째 인자로 
넘겨주는 것이 this context 객체가 됩니다.
이를 명시적 바인딩이라고 합니다.

this의 네번째 동작 방식 - new 바인딩 :
1. 새 객체가 만들어짐 
2. 새로 생성된 객체의 Prototype 체인이 호출 함수의 프로토타입과 연결됨 
3. 1에서 생성된 객체를 this context 객체로 사용(명시적으로)하여 함수가 실행됨
4. 이 함수가 객체를 반환하지 않는 한 1에서 생성된객체가 반환됨

js의 new 키워드는 클래스의 인스턴스 화가 아니라 그와 유사하게 동작하도록 되어있다는 부분을
짚고 넘어가기 위함

• ex) 화살표 함수, call, bind, apply 등

arrow function : 
1. function 키워드 사용해서 함수를 만든 것보다 간단히 함수를 표현할 수 있고, 항상 익명이다.
2. 일반 함수와의 차이점은 this에 있다.
3. 일반함수가 전역 컨텍스트에서 실행될 때 this가 정의합니다.
4. 화살표함수는 this를 정의하지 않습니다.
5. 함수의 내부함수, 콜백함수에 사용되는 this는 window입니다.

call : 
1. call 메소드는 다른 객체 대신 메소드를 호출하는데 사용됩니다. 
2. 이 메서드를 사용하여 함수의 this 객체를 원래 컨텍스트에서 thisObj로 
   지정된 새객체로 변경할 수 있습니다. (this 객체를 다른객체로 변경)

apply : 
'call' 메소드와 동일 하나, call 메소드는 인자 하나 하나를, 
'apply' 는 인자 리스트를 전달합니다

bind : 거의 동일하게 활용이 가능하지만 함수를 실행하지 않고, 함수를 생성한 후 
반환하는 점에서 call(), apply()와의 차이점입니다

Ref .

javascript this의 4가지 동작 방식

화살표 함수(Arrow function)

[자바스크립트] API - call, apply 함수

자바스크립트 함수에 bind 메소드 사용하기