스터디 그룹에서 자바스트립트의 this와 관련된 질문이 들어왔다. 기존에 그러려니 하고 넘어갔던 부분인데 이번에 제대로 알게 됐다.
function makeUser() {
return {
name: "John",
ref: this
};
};
let user = makeUser();
alert( user.ref.name ); // Error: Cannot read property 'name' of undefined위 예시(출처: https://ko.javascript.info/object-methods) 에서 user.ref가 undefined인 이유가 무엇인지에 대한 내용이었다.
1) this는 함수를 호출할 때 함수가 어떻게 호출되었는지(전역에서 호출 됐는지 객체 안에서 메서드로 호출 됐는지)에 따라 this에 바인딩할 객체가 동적으로 결정 된다.
2) 기본적으로 전역함수와 내부함수(함수 안에서 선언된 함수)의 this는 전역객체에 바인딩 된다. 따라서 전역함수와 그 안의 내부함수의 this는 전역객체가 된다.
(전역 변수는 전역객체의 프로퍼티, 전역 함수는 전역객체의 메서드가 된다.
var x = 1;
function foo(){
console.log('hi')
}
// 프로퍼티로 접근가능
window.x
// 프로퍼티로 접근 가능한 메서드
window.foo()
/*
Global Object
window = {
...,
x: 1,
foo: function(){
console.log('hi)
}
}
이런 모양.
*/
참고
https://techwell.wooritech.com/docs/languages/javascript/scope-this
)
위의 예시 코드에서 makeUser 함수는 전역함수다. 즉, makeUser에서 쓰인 this는 전역객체가 된다. 브라우저 환경에서 전역 객체는 window 객체이므로 this는 window 객체를 의미한다.
3) this가 window 객체인데 undefined가 출력된 것은 'use strict' 엄격 모드 때문이다. 기존에(ES5까지) 생성자 함수를 호출할 때 new 키워드를 잊어버리면 this가 전역 객체(브라우저의 window 객체)를 참조하여 전역 객체를 변경하게 된다.
function myConstructor() {
this.a = 'foo';
this.b = 'bar';
}
myInstance = new myConstructor();
// all cool, all fine. a and b were created in a new local object
myBadInstance = myConstructor();
// oh my gosh, we just created a, and b on the window object이런 혼동을 막기 위해 this에 전역객체가 오면 undefined로 전역객체를 대체한다.
4)
function makeUser() {
return {
name: "John",
ref() {
return this;
}
};
};
let user = makeUser();
alert( user.ref().name ); // John객체의 프로퍼티로 선언된 함수, 즉, 메서드의 this는 메서드(자기자신)를 프로퍼티로 갖는 객체를 의미한다.
