this
자바스크립트에서 this는 어떤 실행컨텍스트에 대한 정보이다. 그 실행컨텍스트에 선언된 함수, 변수 등등 여러가지 정보를 가지고 있는 녀석이라고 생각하면 된다.
그리고 이 this는 함수를 호출한 방법에 따라 결정된다.
그렇다면 this는 어떤경우에, 어떻게 바뀔까?
전역공간에서
전역공간은 무조건 처음에 호출이 되니깐, 여기에서의 this는 당연히 전역객체를 가르킨다.
브라우저에서는 window / node.js 에서는 global 이라는 객체이다.
함수 호출시
함수 호출시에 this도 전역객체를 가르킨다.
function a() {
console.log(a);
}
a();왜 함수 호출시에 this가 전역객체냐면, 결국 함수를 호출해주는 주체가 전역객체이기 때문이다. 다른 예시를 보자.
function b() {
function c() {
console.log(this);
}
c();
}
b();위 코드에서, b를 호출 할 때의 this가 전역객체 인 것은 방금 a 함수 예를 봐서 알것이다.
그러면 c함수의 this는?? b함수 내부에서 호출했으니까 b가 되어야하지 않을까?
하지만 c함수의 this는 전역객체가 나온다.
var d = {
e: function() {
function f(){
console.log(this);
}
f(); // 전역객체가 주체..
}
d.e();여기서 주목해야 할 점은 호출형태를 보면 알 수 있다는 것이다.
즉 메서드로 호출되는게 아닌 a(), b(), c() 이런식으로 그냥 함수로써 호출되는 얘들은 this가 모두 전역객체를 가르킨다.
(화살표 함수를 사용하는 경우는 예외)
메서드 호출시
메서드를 호출 했을 시 this는 메서드를 호출한 주체이다.
즉, 메서드 명의 . 앞에있는 객체가 this가 된다.
var a = {
b: function() {
console.log(this);
}
}
a.b();위 코드는 a가 this가 된다.
var a = {
b: {
c: function() {
console.log(this);
}
}
}
a.b.c();여기서의 this는 a.b 가 된다.
callback 호출시
기본적으로는 함수 내부와 동일하다.
var callback = function() {
console.dir(this);
};
var obj = {
a: 1,
b: function(cb) {
cb();
}
}
obj.b(callback);obj 객체 안에 b 함수가 메서드로써 존재하고, callback이라는 함수를 넘겨주고 있다.
여기서 this는 어디를 가르킬까?
전역객체를 가르킨다. 왜냐하면 cb가 함수로써 호출됬기 때문이다.
자바스크립트에서 함수로써 호출되는 경우, this는 전역객체를 가르킨다.
var callback = function() {
console.dir(this);
};
var obj = {
a: 1,
b: function(cb) {
cb.call(this);
}
}
obj.b(callback);이 경우에 this는 어디를 가르킬까?
cb를 그냥호출하지않고, call메서드를 이용하여 호출했다. call 메서드의 인자로 this를 주었고, b컨텍스트에서의 this는 obj이고, 따라서 위 예제에서 callback은 obj 객체를 가르킨다.
콜백함수에서의 this는 콜백함수 자체가 어떻게 할 수 있는게 아니고, 콜백함수를 넘겨받은 대상이 매개변수로 받은 콜백함수를 어떻게 처리하냐에 따라서 this가 달라진다.
정리
- 기본적으로 함수의 this 와 같다.
- 제어권을 가진 함수가 콜백의 this를 지정해둔 경우가 있다. (이 경우에는 지정해 준 this를 따르게 된다.)
- 개발자가 this를 바인딩해서 콜백으로 넘기면 this는 바인딩 한 객체를 가르킨다.
생성자 함수 호출시
new 연산자를 썼을 경우 this는 어떻게 될까?
새로 만들 인스턴트 객체 그 자체가 this가 된다.
function Person(n, a) {
this.name = n;
this.age = a;
}
var roy = Person("roy", 27);
console.log(window.name, window.age);
// "roy", 27
// 이 경우에는 전역객체에 name, age가 할당된다.function Person(n, a) {
this.name = n;
this.age = a;
}
var roy = new Person("roy", 27);
console.log(roy.name, roy.age);
// "roy", 27
// 이 경우에는 roy가 this가 된다.
다음 강의를 참고하여 정리한 글 입니다.
https://www.inflearn.com/course/%ED%95%B5%EC%8B%AC%EA%B0%9C%EB%85%90-javascript-flow/dashboard
