자바스크립트 this란?
공식문서 피셜 this의 값은 호출한 방법에 따라 결정된다...라는데 사실 잘 모르겠다 그러니 직접해보자
자바스크립트 this 사용해보기
기본 세팅
index.js
- 객체 안에 함수도 가능
- 함수 안에 함수도 가능
1
2
3
4
5
6
7
8
9
10
11
12
13
const name = {
name: "오윤희",
getName: function () {
console.log(this);
const second = function () {
console.log(this);
};
second();
},
};
name.getName();
console.log(name);
index.html
- script태그로 index.js를 불러온다. 그러면 index.html을 실행하면 index.js도 같이 실행
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module" src="./index.js"></script>
</body>
</html>
이제 index.html을 실행하면 콘솔에 아래와 같이 값이 찍힌다.
this는 자신을 호출한 녀석을 가리킨다.
콘솔 결과를 하나씩 해부해보자
1
2
3
4
5
6
7
8
9
10
11
12
13
const name = {
name: "오윤희",
getName: function () {
console.log(this);
const second = function () {
console.log(this);
};
second();
},
};
name.getName();
console.log(name);
- index.js:4번쨰 줄
첫번째 콘솔 값은 name.getName()이 실행되서 찍힌 것 인데 이것은 name객체가 this를 호출했다고 본다. 그래서 this가 name객체를 가리켜서 콘솔에 찍혔다.
- index.js:6번쨰 줄
2번쨰 콘솔 값은 second() 함수에 의해 찍힌 값인데 name.getName()함수가 실행되면서 그저 혼자 실행된 것 이고 호출한 사람도 없으므로 undefined이다.
- index.js:13번쨰 줄
3번쨰 콘솔 값은 name객체를 콘솔에 직은 것 인데 첫번째 콘솔에 찍힌 this와 다를게 없다.
화살표 함수 this
second()함수를 화살표 함수로 바꿔주고 실행해보자
1
2
3
4
5
6
7
8
9
10
11
12
13
const name = {
name: "오윤희",
getName: function () {
console.log(this);
const second = () => {
console.log(this);
};
second();
},
};
name.getName();
console.log(name);
아래에 콘솔 값을 보면 undefined이던 2번쨰 값이 name이 찍혔다.
화살표 함수에서의 this는 상위 this를 계승받는다.
마치며
혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.