THIS 정리

KHW·2021년 8월 20일

자바스크립트

Javascript 지식쌓기

목록 보기

75/95

⭕ 함수와 THIS의 특징

🏴 함수의 특징

자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다.

function square(number) {

  console.log(arguments);
  console.log(this);

  return number * number;
}

square(2);

🏴 This의 특징

함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정

⭕ 함수의 호출 방식

함수 호출

메소드 호출

생성자 함수 호출

apply/call/bind 호출

이벤트리스너나 제이쿼리

1. 함수 호출

전역함수는 물론이고 심지어 내부함수의 경우도 this는 외부함수가 아닌 전역객체에 바인딩
콜백함수의 경우에도 this는 전역객체에 바인딩된다.
내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관게없이 this는 전역객체를 바인딩한다

2. 메소드 호출

메소드 내부의 this는 해당 메소드를 소유한 객체, 즉 해당 메소드를 호출한 객체에 바인딩

3. 생성자 함수 호출

new 연산자와 함께 생성자 함수를 호출하면 this 바인딩이 메소드나 함수 호출 때와는 다르게 동작

4. apply/call/bind 호출

this를 특정 객체에 명시적으로 바인딩

1) call : 두번째 인자부터 값 형태로 연결 및 실행
2) apply : 두번째 인자를 배열 형태로 연결 및 실행
3) bind : this가 바인딩된 새로운 함수를 리턴

5. 이벤트리스너나 제이쿼리

일반함수 기준으로 이벤트가 발생할 때, 내부적으로 this가 바뀐다.
this가 내부적으로 바뀌지 않게 하는 방법은 화살표함수를 사용하는 것이다.

💠 이벤트리스너 예시


<body>
    <button id="app">abC</button>
<script>
    function outer(){
        console.log('outer ' ,this);
    }

    document.querySelector('#app').addEventListener('click', function() {
  console.log('addEvent ', this); // <div>
  const innerArrow = () => {
    outer();
    
    console.log('innerArrow ', this); // inner <div>
    const inner = () => {
        console.log('innerArrow inner ', this);
    }

    inner();
  }

  function innerFunc(){
    outer();

    console.log('innerFunc ', this)
    const inner = () => {
        console.log('innerFunc inner ', this);
    }

    inner();
  }
  
  innerArrow();
  innerFunc();
});
</script>
</body>

결과

addEvent : 내부적으로 이벤트 핸들러는 this가 해당 태그 대상으로 바뀌어서 button태그
outer : 전역컨텍스트안의 this로 window객체를 나타냄
innerArrow : 화살표 함수는 this로 window 대신 상위 함수의 this를 가져오므로 해당 부분의 상위는 this가 해당 태그 대상으로 바뀐 button태그
innerArrow inner : 해당 상위 this를 찾아가는데 상위도 화살표함수이므로 다시 그 상위인 해당 태그 대상으로 바뀐 button태그
outer : 전역컨텍스트안의 this로 window객체를 나타냄
innerFunc : 내부일반함수이므로 window 객체를 나타냄
innerFunc inner : 화살표함수이므로 해당 상위 this를 찾아가는데 상위는 내부일반함수이므로 window 객체를 나타냄