[JavaScript] This에 대한 얕은 탐구

들어가며

자바스크립트에 대한 지식이 1mm 내린 비처럼 있을랑 말랑 했던 시절..

this에 대한 설명글들을 봐도 도무지 이해하기가 어려웠다.

이게 뭔가에 따라서 달라지는건 알겠는데 그래서... 어떻게 된다는 ? ?..

this를 들여다 보는 나

짧게 얘기하자면 this는 누가 호출했느냐에 따라 달라진다.

어렵게만 느껴졌던 this에 대해 정리해 보자.

 

그래서 this란??

일단 this의 사전적 의미는 '이것'이긴 한데.. 뭘 가리키느냐.

바로 자신이 속한 객체나 생성할 인스턴스를 가리키는 변수다.

 

 

C++이나 JAVA와 같은 클래스 기반의 언어에서의 this는 클래스가 생성한 인스턴스다.

이미 this를 선언하면서 생성된 인스턴스를 가리킨다고 결정된 것이다.

그런데 자바스크립트의 this는 좀 특이하다. 자바스크립트에서의 this는 호출방법에 따라서 결정된다.

즉, 누가 나를 부른 것인가?? 에 따라서 동적으로 결정된다.

누구인가? 누가 나를 불렀느냔 말이야

이렇게 선언이 아닌 호출 방법에 따라서 결정되기 때문에, 특정 객체와 연결되어 this를 고정하는 과정을 바인딩한다고 한다.

그럼 호출 방식에 따라서 this가 어떻게 바인딩되는지 살펴보자.

 

 

함수 호출 방식에 따른 this 바인딩

객체 메서드 안에서의 this

여기서의 this는 해당 메서드를 호출한 객체다.

const person = {
    name: "mimi",
    getName(){
        return this.name;
    }
}

console.log(person.getName()); // mimi

 

일반 함수(중첩, 콜백함수 포함)에서의 this

전역 객체가 바인딩된다. 브라우저일 때의 전역객체는 window.

함수 안에서 중첩 함수로 정의하고 일반 함수로 호출해도 this는 전역 객체가 바인딩 된다.

function hello(){
    console.log('hello -> this: ', this); // window

    function hi(){
        console.log('hi -> this: ', this); // window
    }
    hi();
}
hello();

여기서 '일반 함수'라는 키워드를 붙였는데, ES6 문법의 화살표 함수에서의 this와는 다르기 때문이다.

화살표 함수에는 함수 자체의 this 바인딩이 없기 때문에 상위 스코프의 this를 그대로 참조한다.

이 부분은 화살표 함수에 대한 글을 따로 작성해보려 한다.

 

이벤트 핸들러 안에서의 this

이벤트 리스너에 바인딩된 HTML 요소가 this다. (호출을 이 요소가 했으니까~)

<button>button</button>
<script>
    const button = document.querySelector('button');
    button.addEventListener('click', function () {
        console.log(this); // <button>button</button>
    });
</script>

 

생성자에서의 this

생성할 새로운 인스턴스(생성된 객체)가 this다.

function Person(name){
    this.name = name;
    this.getName = function(){
        return this.name;
    }
}

const person = new Person('mimi');
console.log(person.getName()); // mimi

여기서의 this는 새롭게 생성한 인스턴스, 즉 person 자신이 되는 거다.

하지만 new 키워드를 빼면 일반 함수 호출과 같아져서 window가 this가 된다는 사실!!

 

call(), apply(), bind()

그리고 call, apply, bind 메서드로 this를 명시적 바인딩할 수 있다.

 

apply()와 call()

apply()와 call() 메서드는 첫 번째 인자를 this로 바인딩하고, 두 번째 인자를 함수의 인자로 전달한다.

둘이 그럼 무슨 차이가 있다는 건가 싶을 수 있지만 두 번째 인자를 처리하는 방식의 차이가 있다.

apply() 메서드는 두 번째 인자를 배열의 형태로 받아 함수로 전달한다.

즉 함수에게 배열이나 유사 배열 객체로 전달한다는 것이다.

그래서 주로 유사 배열 객체에서 배열 메서드를 쓰려할 때 많이 사용한다.

Call() 메서드는 리스트 형식으로 두 번째 인자를 함수에게 전달한다.

 

bind()

bind 메서드는 첫 번째 인자에 this를 바인딩한다는 점은 같지만, 새로운 함수를 반환한다.

이 새로운 함수를 실행해야 원본 함수가 실행된다는 것!..

내부의 중첩 함수나 콜백함수의 this가 일치하지 않는 경우 해결방법으로 쓰인다.

 

use strict 모드에서의 this

use strict 모드에서의 this도 좀 다르다는 것을 알게 되었다.

use strict 모드에서는 함수 내의 this에 디폴트 바인딩이 없기 때문에 undefined라는 값이 나온다.

생성자 함수가 아닌 일반 함수의 내부에서는 this를 사용할 필요가 없기 때문!..

(function (){
    'use strict';

    function foo(){
        console.log(this); // undefined    
    }
    foo();

    function Foo(){
        console.log(this);  // Foo
    }
    new Foo();
}());

 

 

화살표 함수에서의 this

화살표 함수에서의 this 또한 조금 다르다.

여기서의 this는 일반적인 this와 다르게 자신을 참조하는 this를 만들지 않는다.

대신 함수가 선언된 스코프에서의 this를 상속한다. 즉, 상위 스코프의 this를 참조한다. 

const myObj = {
  myMethod() {
    const myArrowFunction = () => {
      console.log(this); // myObj 객체
    };
    myArrowFunction();
  }
};

myObj.myMethod(); // 화살표 함수를 호출할 때, this는 상위 스코프인 myObj 객체를 가리킨다

 

 

 

참고

https://nykim.work/71

https://oneroomtable.tistory.com/entry/자바스크립트-this란-대체-무엇일까

https://poiemaweb.com/js-this

 

 

 

 

 

---

🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️

방문해 주셔서 감사합니다! 🙌

포스팅들은 공부 중인 내용을 글로 작성한 것이라 부족한 점이 많으니 참고 부탁드립니다. 

부족한 부분에 대한 코멘트는 언제나 환영입니다.

좋은 하루 보내세요, 감사합니다! 🙂