this는 함수를 호출할 때 결정. 즉, 실행 컨텍스트가 생성될 때 함께 결정된다.
함수를 어떤 방식으로 호출하느냐에 따라 값이 달라진다.
전역 공간에서의 this
전역공간에서 this는 전역 객체를 가리킴
브라우저 환경에서의 전역 객체는 window, Node.js 환경에서는 global
var a = 1;
console.log(a); // 1
console.log(this.a) // 1
console.log(window.a) // 1
JavaScript
복사
자바스크립트의 모든 변수는 특정 객체의 프로퍼티로서 동작한다.
메서드 내부에서의 this
메서드는 그 자체로 독립적인 기능을 하는 함수와 달리 자신을 호출한 대상 객체에 관한 동작을 수행한다. 함수 이름 앞에 객체가 명시돼 있는 경우에는 메서드로 호출한 것
메서드 내부에서의 this에는 호출한 주체에 대한 정보가 담긴다.
함수 내부에서의 this & 메서드 내부함수에서의 this
실행 컨텍스트를 활성화 할 당시에 this가 지정되지 않은 경우 this는 전역 객체를 바라보게된다.
어떤 함수를 함수로서 호출할 경우에는 this가 지정되지 않으므로 this는 전역 객체
메서드 내부함수도 함수를 호출한 것이므로 this는 전역객체를 가리킨다.
this 바인딩에서는 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지 없는지에 따라 this가 가리키는 값이 달라진다.
화살표 함수 내에서의 this (ES6)
화살표 함수를 사용하게 되면 this 바인딩 과정 자체가 빠지게 되어 상위 스코프의 this를 그대로 활용할 수 있다.
콜백 함수 호출 시 그 함수 내부에서의 this
해당 콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역 객체 참조
생성자 함수 내부에서의 this
new 명령어와 함께 함수를 호출하면 해당 함수가 생성자로서 동작하게 되는데 이 때 내부의 this는 곧 새로 만들 구체적인 인스턴스 자신이 된다.
생성자 함수를 호출 → 생성자의 prototype 프로퍼티를 참조하는 __proto__라는 프로퍼티가 있는 객체를 만듦 → 공통 속성 및 개성을 해당 객체에 부여
명시적으로 this를 바인딩
call 메서드
호출 주체인 함수를 즉시 실행하도록 하는 명령
call 메서드의 첫 번째 인자를 this로 바인딩, 이후의 인자들을 호출할 함수의 매개변수로 지정
apply 메서드
call 메서드와 기능적으로 동일
첫번째 인자를 this로 바인딩, 두 번째 인자는 배열로 받아 함수의 매개변수로 지정
활용
유사배열객체에 배열 메서드 적용
arguments 객체도 유사배열객체.
bind 메서드
즉시 호출하지 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드
bind 메서드를 적용해서 새로만든 함수는 name 프로퍼티에 bound라는 접두어가 붙게된다.
기존의 call이나 apply보다 코드를 추적하기 수월하다.