Javascript에서 this
기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. = this는 함수를 호출할 때 결정된다.
즉, 함수를 어떤 방식으로 호출하냐에 따라 값이 달라진다.
1-1. 전역공간에서의 this
전역공간에서 this는 전역객체를 가르킨다. ( 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문)
브라우저에서는 window, Node.js에서는 global 이다.
전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당한다.
하지만 삭제명령의 경우 전역변수 선언과 전역객체의 프로퍼티 할당 사이 차이가 존재한다.
var b = 2;
delete b; //false
console.log(b, window.b, this.b); //2 2 2
window.c = 3;
delete.window.c; //true
console.log(c, window.c, this.c); //Uncaught ReferenceError : c is net defined
처음부터 전역객체의 프로퍼티로 할당한 경우에는 삭제가 되지만, 전역 변수로 선언한 경우에는 삭제가 되지 않는다.
사용자가 의도치 않게 삭제하는 것을 방지하는 차원에서 만들어진 전략이다.
1-2.메서드로서 호출할 때 그 메서드 내부에서의 this
함수 vs 메서드
이 둘을 구분하는 차이점은 "독립성"이다.
함수는 독립적 기능을 수행하고, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행한다.
(메서드로 사용되기 위해 어떤 함수를 객체 프로퍼티에 할당한다???? -> 무조건 메서드가 되는 것은 아님 !!! 메서드로 호출할 경우만)
그렇다면 "함수로서의 호출"과 "메서드로서의 호출"을 어떻게 구분할 수 있을까?
➡️함수 앞에 (.)이 있는지 간단하게 구분하자 !!
- 메서드 내부에서의 this
- 마지막 점 앞 객체가 this가 된다.
- 이 this에 호출한 주체에 대한 정보가 담긴다.
1-3. 함수로서 호출할 때 그 함수의 내부에서의 this
- this가 지정되지 않아 전역객체를 바라본다.
- 따라서 호출 주체의 정보를 알 수 없다.
- 메서드의 내부 함수에서 this 우회하는 방법
var self = this;
상위 스코프의 this를 저장해서 내부함수에서 활용하려는 수단이다.
-this를 바인딩 하지 않는 함수 = 화살표함수(arrow function)
- this를 바인딩하지 않는다.
- 상위 스코프의 this를 그대로 활용할 수 있다.
1-4. 콜백 함수 호출 시 그 함수 내부에서의 this
콜백함수란?
함수A의 제어권을 다른 함수 ( 또는 메서드) B에게 넘겨주는 경우 함수 A를 콜백 함수라 한다.
콜백함수도 함수이기 때문에 this가 전역객체를 참조한다. 하지만 별도로 this를 지정하면 그 대상을 참조한다.
setTimeout(function () {console.log(this)}, 300) //this 지정x
document.body.innerHTML += '<button id="a">클릭</button>';
document.body.querySelector("#a")
.addEventListener('click', function (e) {
console.log(this, e)
}); //자신의 this 상속하도록정의 되어있음
1-5. 생성자 함수 내부에서의 this
생성자 함수는 어떤 공통된 성질을 지니는 객체들을 생성하는 데 사용하는 함수이다.
자바스크립트는 함수에 생성자로서의 역할을 함꼐 부여했다.
new 명령어와 함께 함수를 호출하면 해당 함수가 생성자로서 동작한다. 그리고 어떤 함수가 생성자 함수로서 호출된 경우 내부에서의 this는 곧 새로 만들 구체적인 인스턴스 자신이 된다.
2.명시적으로 this를 바인딩하는 방법
- call 메서드
- apply 메서드
- bind 메서드
Ref
정재남<코어 자바스크립트>
