❓ this.. 어디서 많이 봤는데..

그냥 object일뿐! 근데 실행 콘텍스트를 곁들인..

HTML 요소에 이벤트 추가할 때
bind 함수를 사용할 때
화살표 함수를 사용할 때

⚡ 왜 문제일까?

다음의 사례를 살펴보자!

새로운 객체를 만들고 그 객체에 this를 바인딩하는 new 바인딩.

<script>
    function hello(a) {
        this.a = a;
    }
    var bye = new hello(2);
    console.log(bye.a)
</script>

가장 평범한 함수 호출인 '단독 함수 실행'에 관한 규칙.
나머지 규칙에 해당하지 않을 경우 적용되는 기본 바인딩.
전역 객체를 참조함. 단, 엄격 모드에선 전역 객체가 기본 바인딩 대상에서 제외됨(이때 this는 undefined).

<script>
    function hello() {
        console.log(this);
    }
</script>

<script>
    "use strict";
    function hello() {
        console.log(this);
    }  
    hello();   
</script>

호출부에 콘텍스트 객체가 있는지 → 누가 실행했는지.
암시적 바인딩.

<body>
		<h1 class="myTitle">JS에서 This가 뭐지?</h1>
    <script>
        const myTitle = document.querySelector(".myTitle");

        function hello() {
            console.log(this);
        }

        myTitle.addEventListener("click", hello)
    </script>
  </body>

this 바인딩이 소실되는 경우가 있다?

함수의 참조 값을 전달하는 과정에서 암시적 소설이 일어난다. 진짜 참조 값만 전달한다고 한다..

<script>
    function hello() {
        console.log(this.a);
    }

    const obj = {
        a : 2,
        hello : hello
    }

    const bye = obj.hello;
		
    var a = 1000;

    bye();
</script> //1000

✅ 강제하면 되지 않을까?

가능하다! 어떤 객체를 this 바인딩에 이용하겠다는 의지를 코드에 명확히 밝힐 방법! 이를 명시적 바인딩이라 한다.
call과 apply는 함수를 호출함. bind는 새로운 함수를 반환한다.
- call()
- apply()
- bind()

<aside> ⚠️ apply()와 거의 동일하지만, call()은 인수 목록을, 반면에 apply()는 인수 배열 하나를 받는다는 점이 중요한 차이점입니다.

</aside>