본 강의는 자바스크립트의 기초를 대충 안다고 가정하고 시작하는 조금 심도 깊은 포스팅이다.
완전 처음부터 배우고 싶다면 다른 블로그나 책의 글을 참조하기를 바란다.
특별한 추가 설명이 없다면 nodejs가 아닌 브라우저에서 사용하는 js를 의미한다.
참고:
javascript docs
ecmascript specification
js에서 this에 대해서 알아보도록 하자.
정말 이 때까지 js에대해서 설명하면서 "기존의 ~와는 다르다"라는 식으로 설명을 주로했었다.
이번 포스팅에서 this는 그래도 이때까지와는 다르게 다른 언어의 this...
와는 다르다...
정말 처음부터 끝까지 마음에 드는게 없는 녀석이지만 한번 제대로 알아보도록 하자.
js는 this에 따라서 부르는 대상이 다르다. 그런데 잘 보면 일종의 공식이 있긴하다.
바로 자기자신을 호출한 녀석이 this가 된다고 생각하면 일단 편하다. 문제는 아닌 경우도 있다는 것이다.
이걸... 공식이라고 해야할진 모르겠지만.
각각의 상황에 맞게 나눠서 언급하겠다.
전역에서 this를 사용하면 상황에 따라 다르다.
브라우저의 this와 nodejs에서의 this는 다르다.
이 때까지는 브라우저만 이야기했는데 이번에는 nodejs를 살짝 언급하겠다.
정리하자면 아래와 같다.
browser - window
nodejs - 빈 object
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
console.log(this.constructor.name);
console.log(this);
</script>
</body>
</html>
브라우저에서 한번 실행해보자.
위에선 언급했다 시피 window객체가 반환된다.
console.log('#1 : ' + this.constructor.name);
console.log('#2 : ' + this);
nodejs는 글로벌 오브젝트가 반환된다.
보다시피 글로벌 오브젝트가 반환되는 것을 확인할 수 있다.
자, 이제 전역에서 사용하는 this가 어떤지 알았으니까 함수에서 쓰는 this가 어떤지 알아보자.
함수에서 사용하는 방식은 전역에서와 동일하다.
단 스티릭트 모드가 동작하게 된다.
browser - window
nodejs - global
strict모드 - undefined
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function f() {
console.log(this.constructor.name);
console.log(this);
}
f();
</script>
</body>
</html>
일단 함수에서는 사용하면 전역과 동등하다.
function f() {
console.log('#1 : ' + this.constructor.name);
console.log('#2 : ' + this);
}
f();
함수에서는 글로벌 오브젝트가 호출된다.
그리고 하나 더 생각해야할게 있다. strcit모드를 쓰면 어디에서는 undefiend가 된다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function f() {
'use strict';
console.log(this);
}
f();
</script>
</body>
</html>
strict모드의 경우에는 nodejs와 browser가 동일하다.
둘다 동등하게 undefiend가 나온다.
그럼이제 method에서 사용하는 this를 보도록 하자.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var myObj = {
num1: 10,
num2: 5,
sum: function () {
console.log(this === myObj);
console.log(this.num1 + this.num2);
}
};
myObj.sum();
</script>
</body>
</html>
메소드에서의 this는 browser건 nodejs건 strict건 똑같다.
method에서의 this는 자기 자신을 호출한 녀석을 호출한 녀석을 의미한다.
즉 자기 자신의 객체를 반환한다.
그러나 매우 조심해야할게 있다. 바로 arrow함수를 사용할 때이다.
이 상황에 대해서는 아래에서 언급하도록 하겠다.
이제 생성자에서 this를 보도록하자.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function Point(x, y) {
console.log(this.constructor.name);
this.x = x;
this.y = y;
}
var point = new Point(10, 5);
</script>
</body>
</html>
사실 생성자에서의 this는 여러분도 이미 알고 있을 것이다. 그러나 다시 한번 말하자면 this는 내가 만든 객체를 가르킨다.
이는 new를 선언했을 때 항상 일어나는 과정이라고도 할 수 있다.
이 방식은 class를 사용했을 때 역시 동일히다.
이제 대부분의 상황에서의 해결법을 알려줬다.
다음 포스팅에서는 this를 쓰면서 주의해야할 점에 대해서 알려주겠다.