자바스크립트에서의 this
this의 정의
this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수라고 할 수 있다. 또는 이라는 표현이 보이는데 this가 고정된 값에 바인딩 되지 않기 때문이다.
this 바인딩
자바스크립트에서 this가 참조하는 것은 함수가 호출되는 방식에 따라 결정되며 this 바인딩이라고 부른다.
this 바인딩에는 4+1가지 규칙이 있다.
- 기본 바인딩
- 암시적 바인딩
- 명시적 바인딩
- new 바인딩
- 화살표 함수(ES6)
기본 바인딩(Default Binding)
기본 규칙이며, 기본 바인딩이 적용되면 this는 전역 객체에 바인딩된다. 즉, 브라우저 환경에서의 this는 window를, node.js 환경에서의 this는 global을 가르킨다.
위의 이미지를 보면 this는 전역객체에 바인딩되어 있기 때문에 const q = 7;에 상관없이 전역객체에 q라는 프로퍼티가 있는지 찾아보고 없기 때문에 undefined가 출력된다.
위의 이미지에서 볼 수 있듯이 window에 q라는 프로퍼티가 있다면 q프로퍼티의 값을 출력한다.
암시적 바인딩(Implicit Binding)
함수가 객체의 메서드로서 호출되는 상황일 때 this는 해당 함수를 호출한 객체, 즉 콘텍스트 객체에 바인딩 된다.
명시적 바인딩(Explicit Binding)
자바스크립트의 모든 함수는 call(), apply(), bind()라는 프로토타입 메서드를 가지고 있다. 이 세가지 프로토타입 메서드들 중 하나를 호출함으로써 this 바인딩을 코드에서 명시하는 것을 명시적 바인딩이라고 하며, this는 내가 명시한 객체에 바인딩된다.
call(), apply()
bind()
new 바인딩(new Binding)
자바스크립트에서 new 키워드는 함수를 호출할 때 new 키워드를 사용하면 객체가 초기화 되는데, 이때 사용되는 함수를 생성자 함수라고 한다.(생성자 함수는 대문자로 시작한다.) 그리고 생성자 함수에서 this는 해당 생성자를 이용해 생성할 객체에 대한 참조로 사용된다.
위의 이미지에서 Qqq라는 함수가 new 키워드와 함께 호출되면 새로운 객체가 생성되며 this는 새로 생성된 객체로 바인딩된다. 그리고 생성된 객체의 q라는 프로퍼티에 7이라는 값이 할당되었고, 해당 객체는 www라는 변수에 할당된다.
화살표 함수
ES6에 새롭게 추가된 화살표 함수는 앞의 4가지 규칙들에 적용되지 않고 어휘적 스코프(Lexical scope)가 적용된다. 화살표 함수를 정의하는 시점의 컨텍스트 객체가 this에 바인딩된다. 즉, 화살표 함수에는 this가 없다.
위의 이미지를 보면 화살표 함수에서의 this는 자기 주변에서 q의 값을 찾고 없으면 상위 환경으로 올라간다. 그래서 상위 환경을 계속 올라가면서 발견한다면 그 값을 참조하여 출력한다.
참고한 사이트 :
https://seungtaek-overflow.tistory.com/21
https://velog.io/@padoling/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-this-%EB%B0%94%EC%9D%B8%EB%94%A9
