THIS가 가지는 값을 알아보자

tistroy에서 글 옮김

📕바인딩 종류

동적인 바인딩 : 호출하는 사람에 의해서 동적으로 결정된다.
정적인 바인딩 :호출하는 곳에 관계없이 this 참조가 변하지 않음(bind(),call(),apply(),화살표 함수 내부의this가 외부 스코프의 this로 고정 되었을때)

📘THIS경우의 수 확인하기

제한사항

1. strict mode
2. 내장함수를 쓰는경우 인자가 되는 콜백함수는 바운드 된 함수를 쓸것
3. 코드포함한 가장 큰 단위 함수는 일반 함수로 하고 모든 코드는 이 일반함수 안에서 작성함을 기준으로함

실행방법

1. 객체에 함수를 담고 동적으로 함수에 접근해서 호출

class Hello{...}
let hello = new Hello();
hello.bye = function(){...} <-함수 추가 
hello{bye : function(){}} <-추가된 결과
hello.bye() <- 추가한 함수를 호출

2. 객체에 함수 안담고 IIFE방식 (function(){...})() 로 선언 또는 보통의 function() 함수로 실행 (=normal)
3. .apply() .call() 로 함수를 호출.
   bind()처럼 호출한 함수는 인자로 전달한 속성에 this가 바운딩됨. ex) functionName.apply(인자) 참고. call과 apply 차이점

두 메서드의 첫번째 인자로 받는 this바인딩 기능은 동일하지만 두번째 인자로 받는 값은 함수에 넘겨줄 메개변수의 형태의 차이가 있다.
call()은 일반 함수처럼 인수를 받는다, 반면에 apply()는 인수 배열 하나를 받는다는 점이 중요한 차이점임

THIS 경우의 수

0. this는 아래 상황을 제외하고는 항상 undefined이다.

1. 일반함수 중 바인딩 되지 않은 함수를 1의 방법(객체접근)으로 실행할때 해당 함수 안에서의 This는 해당 함수에 접근하기 위해 통했던 객체(obj)이다

   const obj = {
     result : "딸기",
     fnc1 : function() {
      return this.result; 
     }
   }
   obj.fnc1() //딸기

2. 일반 함수 중 바인딩 되지 않은 함수를 2의 방법(normal)으로 실행할 때 해당 함수 안에서의 this는 항상 undifined 이다

   function fnc2() {
     return this
   }
   fnc2() //undefined

3. 일반 함수 중 바인딩 되지 않은 함수를 3의 방법(call,apply)으로 실행할 때 해당 함수 안에서의 this는 apply나 call 함수의 첫 번째 인자 값이다.

   const obj2 = { fruit : "사과" }
   function fnc3(){
    return this.fruit
   }
   fnc3.call(obj2) //사과

   바인딩 된(bind()) 함수

   4. 일반 함수 중 바인딩 된(bind()) 함수를 1의 방법으로 실행할 때 해당 함수 안에서의 this는 바인딩 된 값이다 (통했던 객체 무시)

      const obj3 = {
      result : "딸기",
      fnc4 : function() {
       return this
      }
      }
      obj3.fnc4().result;  //딸기
      let bindFnc4 = obj3.fnc4.bind({result : "상한딸기"})
      bindFnc4().result;  //상한 딸기
      

   5. 일반함수 중 바인딩 된 함수를 2의 방법으로 실행할때 해당 함수 안에서의 This는 바인딩 된 값이다

   6. 일반함수 중 바인딩 된 함수를 3의 방법으로 실행할때 해당 함수 안에서의 this는 바인딩된 값이다(apply나 call함수의 첫번째 인자값 무시)

      function fnc5 () {
      return this.txt
      }
      const bindFnc = fnc5.bind({txt : "bind 했당"})
      bindFnc() // bind 했당
      bindFnc.apply({txt : "apply 했당"})
      bindFnc() // bind 했당

7. 화살표 함수

   화살표 함수의 this는 상위 스코프에서 this가 무엇이냐에 따른다.

   • 화살표 함수를 1의 방법으로 실행할 때 해당 함수 안에서의 This는 상위 스코프에서의 This이다

   • 화살표 함수를 2의 방법으로 실행할 때 해당 함수 안에서의 This는 상위 스코프에서의 This이다

   • 화살표 함수를 3의 방법으로 실행할 때 해당 함수 안에서의 This는 상위 스코프에서의 This이다 (bind() 함수 동일.)

     function contain() {
        this //contain <- 상위 스코프 this
     
        let obj = { //7.
          arrow1 : () => {
            return this;
          }
        }
        let arrow2 = () => { //8.
          return this;
        }
        let arrow3 = () => { //9.
          return this;
        }
     
      obj.arrow1() // 'contain'
      arrow2()// 'contain'
      arrow3.apply('apply')// 'contain'
      arrow3.bind('bind')()// 'contain'
     }
     contain.apply("contain")