ํฐ์คํ ๋ฆฌ ๋ทฐ
1.2 ํ์ดํํจ์์์์ this
๋๋์ด๋ฐ๐พ 2018. 11. 29. 16:37
์ด์ ์๋ ํ์ดํ ํจ์์ ๊ธฐ๋ณธ์ ์ธ ์ ์ธ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด์์ต๋๋ค. ์ด๋ฒ์ ํ์ดํ ํจ์์ ๋ํ๋์ ํน์ง์ธ this์ ๋ํด์ ์์๋ณด๊ฒ ์ต๋๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก this๋ผ ํ๋ฉด ๋ค๋ฅธ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ฅผ ํ๋ ๊ฒฝํ์ด ์๋ค๋ฉด ๊ต์ฅํ ๋ง์ด ๋ค์ด๋ดค์ ํค์๋์ ๋๋ค.
public class Book {
private String title;
private String author;
private int price;
private String publisher;
public Book(String title, String author, int price, String publisher) {
this.title = title;
this.author = author;
this.price = price;
this.publisher = publisher;
}
}
๋ํ์ ์ผ๋ก ์๋ฐ์์๋ ์์ฑ์๋ฅผ ์ ์ํ ๋ ํด๋์ค์์ ์ฌ์ฉํ ๋ณ์๋ช ๊ณผ ์์ฑ์์ ๋งค๊ฐ๋ณ์๊ฐ ๋์ผํ ๋ ์์ ๊ฐ์ด this๋ฅผ ์ฌ์ฉํ์ฌ ๋ด๊ฐ ์ด๊ธฐํ ํ๋ ค๋ ๋ณ์๊ฐ ํด๋์ค์์ ์ ์ธํ ๋ณ์๋ผ๋ ๊ฒ์ ๋ช ํํ๊ฒ ํด์ฃผ๋ ๊ฒ์ด์ฃ . ๊ทธ๋ฐ ์๋ฏธ์์ this๋ฅผ '์๊ธฐ์์ ' ์ด๋ฐ์์ผ๋ก ๋ฒ์ญํ๊ธฐ๋ ํ๋ ๊ฒ ๊ฐ์ต๋๋ค.
์ผ๋จ ํ์ดํ ํจ์์์ this๊ฐ ์ด๋ป๋ค๊ณ ํ๋ ๊ฒ์ ๋ ผํ๊ธฐ ์ ์ this๋ผ๋ ๊ฒ์ด javascript์์๋ ์ด๋ป๊ฒ ์ ์๋๊ณ ์ฐ์ด๊ณ ์๋์ง ๊ฐ๋จํ๊ฒ ์ ์๋ฅผ ์์๋ณด๊ฒ ์ต๋๋ค.
์ฌ๊ธฐ์ ์ค์ํ ํต์ฌ์ ๋ ธ๋์์ ์น ํ ๋ถ๋ถ์ ๋๋ค. ์ ๊ฒ ๋ฌด์จ๋ง์ธ์ง ์ฝ๋์ ๋ณด๋ฉด์ ์์๋ณด๊ฒ ์ต๋๋ค.
(์ด ๋ถ๋ถ์ ์ฝ๋์ข ๋์ ์์๊ฐ์๋ฅผ ํ ๋๋ก ์งํํ์์ต๋๋ค.)
this ์ ๊ฐ์ด ๋ฌด์์ธ์ง๋ฅผ ์์๋ณด๊ธฐ ์ํด ์ฝ๋๋ฅผ ์์ฑํด๋ณด๊ฒ ์ต๋๋ค.
var one = {
num : 1,
number : function() {
console.log(this)
}
};
one.number();
์ด์ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ฑํ๊ณ ํฌ๋กฌ ๊ฐ๋ฐ์๋๊ตฌ์์ ์ฝ์์ ํ์ธํด๋ณด๋ฉด
์ ๋ this๋ฅผ ์ฝ์๋ก ์ฐ์๊ณ ๊ทธ ๊ฐ์ ๊ฐ์ฑํํ๋ก num์ด 1์ด๋ผ๋ ๊ฒ๊ณผ number๋ผ๋ ํจ์๊ฐ ์๋ค๊ณ ๋ณผ ์ ์๊ฒ ์ต๋๋ค. javascript์ this ์ ์์์ this์ ๊ฐ์ ํจ์๋ฅผ ํธ์ถํ ๋ฐฉ๋ฒ์ด ๊ฒฐ์ ํ๋ค๊ณ ํ์์ต๋๋ค. ์ฌ๊ธฐ์๋ ํจ์ํธ์ถ์ one์ด๋ผ๋ ๊ฐ์ฒด๊ฐ ํ ๊ฒ์ด๋ฉฐ ๊ฑฐ๊ธฐ์ this๋ฅผ ์ฐ์ผ๋ one์ ๊ฐ์ฒด์ ๋ณด๊ฐ ๋์จ ๊ฒ์์ ์ ์ ์์ต๋๋ค.
๋ค์์ ํจ์ ํธ์ถ ๋ฐฉ๋ฒ์ ๋ฌ๋ฆฌ ํด๋ณด๊ฒ ์ต๋๋ค.
var one = {
num : 1,
number : function() {
console.log(this);
}
};
var two = one.number;
two();
๊ฐ๋ฐ์๋๊ตฌ๋ก ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด
two ๋ผ๋ ๋ณ์์ one ๊ฐ์ฒด์ ์๋ numberํจ์๋ฅผ ๋ฃ์๋๋ this๊ฐ ์ด์ ๊ฒฐ๊ณผ์๋ ๋ฌ๋ผ์ก์ต๋๋ค. ์ฌ๊ธฐ์ window๋ผ๋ ๊ฒ์ ์ฝ๊ฒ ๋งํ๋ฉด ๋ธ๋ผ์ฐ์ ์์์ ๋ชจ๋ ๊ฐ์ฒด์ ์กฐ์์ด๋ผ๊ณ ๋ ํ๊ณ ์ ์ญ๊ฐ์ฒด(๊ธ๋ก๋ฒ๊ฐ์ฒด) ๋ผ๊ณ ๋ ํฉ๋๋ค.
์ฆ, ํธ์ถ์ window์์ ํ๊ณ ์๋ค๋ ๊ฒ์ ๋๋ค.
์ฒซ๋ฒ์งธ๋ one ์ด๋ผ๋ ๊ฐ์ฒด์์ ํจ์ ํธ์ถ์ ํ๋ค๋ฉด, two๋ ํจ์ ํธ์ถ์ ์ ์ญ๊ฐ์ฒด์์ ํ๊ณ ์๊ธฐ ๋๋ฌธ์ this ๋ผ๋ ์ฝ์์ ์ฐ๊ฒ๋๋ฉด ์ ์ญ๊ฐ์ฒด์ธ window์ ๋ชจ๋ ์ ๋ณด๋ค์ด ์ฐํ๊ฒ ๋๋ ๊ฒ์ด์ฃ . ์ด๋ฌ๋ฉด ์๋ ๊ธฐ๋ํ๋ one์์์ num๊ฐ์ด๋ number๋ผ๋ ํจ์๋ฅผ ์ฌ์ฉํ ์๊ฐ ์์ต๋๋ค.
โ ํธ์ถํ ๊ฐ์ฒด === This
this๋ฅผ window๋ก ๊ฐ์ ธ๋ฒ๋ฆฌ๋ฉด ์ฌ์ฉ์๊ฐ ๊ธฐ๊ป ๋ง๋ค์๋ ๊ฐ์ฒด์ ๋ณด๋ฅผ ์ด์ฉํ ์๊ฐ ์๊ธฐ ๋๋ฌธ์ ES5์์ ์ฌ์ฉํ๋ ๊ฒ์ด bind๋ผ๋ ํจ์์ ๋๋ค. ๊ฐ๋ฐ์๋๊ตฌ ์ฝ์์ ํ์ธํด๋ณด๋ฉด
bind๋ผ๋ ํจ์๋ฅผ ์ฌ์ฉํด์ this๋ฅผ ๋ฌด์กฐ๊ฑด one์ผ๋ก ์ฌ์ฉํ๊ฒ ๋ค ๋ผ๊ณ ์ ํด์ฃผ๋ ๊ฒ์ ๋๋ค. ๊ทธ๋ฌ๋ฉด ์์ ๊ฒฐ๊ณผ์ฒ๋ผ window๊ฐ ์๋ ์ฒ์์ ์๋ํ๋๋๋ก one์ ๊ฐ์ฒด ๊ฐ๋ค์ this๋ก ๊ฐ๊ฒ ๋ฉ๋๋ค.
this์ ๋ํ ์ค๋ช ์ด ์ข ๊ธธ์ด์ง๊ธด ํ๋๋ฐ ๊ทธ๋ผ ๋๋์ฒด ํ์ดํํจ์์์ this๊ฐ ์ด์จ๋ค๋๊ฑด์ง๋ฅผ ์ดํด๋ด์ผ๊ฒ ์ฃ ?
MDN์์ ์ด๋ฐ ๋ด์ฉ์ด ์์์ต๋๋ค.
ECMAScript 2015๋ ์ค์ค๋ก์ this
๋ฐ์ธ๋ฉ์ ์ ๊ณตํ์ง ์๋ ํ์ดํ ํจ์๋ฅผ ์ถ๊ฐํ์ต๋๋ค.
์ด๋ฒ์ htmlํผ์ ๋ฒํผ์ ํ๋ ๋ง๋ค์ด์ ํ์ธ์ ํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
arrow.html
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<meta charset="utf-8" />
</head>
<body>
<button id='btn' type='button'> ๋ฒํผ
<script src='arrow.js'></script>
</body>
</html>
|
cs |
arrow.js
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const btn = document.getElementById('btn')
var obj = {
count : 0,
setCounter : function() {
console.log(this.count);
btn.addEventListener('click',function(){
console.log(this)
})
}
};
obj.setCounter();
|
cs |
๋ฒํผ์ ๋๋ ์ ๋ this ์ ์ ๋ณด๋ฅผ ์ฝ์๋ก ์ฐ๋ ๊ฒ์ธ๋ฐ ์ฝ์๋ก ์ฐํ๋ ๊ฒ์ ํ์ธํด๋ณด๋ฉด
obj ์ ๊ฐ์ฒด์ ๋ณด๊ฐ ์ฐํ๋ ๊ฒ์ด ์๋๋ผ button์ ์ ๋ณด๊ฐ this๋ก ์ฐํ๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค. this ๋ฅผ ํธ์ถํ ๊ฐ์ฒด๊ฐ button์ด๊ธฐ ๋๋ฌธ์ this๋ button์ ์ ๋ณด๊ฐ ์ฐํ ์ ๋ฐ์ ์์ฃ . obj์ ๊ฐ์ฒด์ ๋ณด๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ๊ธฐ์กด์ bind ํจ์๋ฅผ ์ด์ฉํ์ ๋์๋
arrow.js
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const btn = document.getElementById('btn')
var obj = {
count : 0,
setCounter : (function() {
console.log(this.count);
btn.addEventListener('click',function(){
console.log(this)
}).bind(this));
}
};
obj.setCounter();
|
cs |
setCounter์ function ๋ถ๋ถ์ bind ํจ์๋ฅผ ์ด์ฉํ์ฌ ๊ฐ์ ์ ์ผ๋ก obj๋ฅผ this ๋ก ๋ง๋ค์ด์ฃผ์ด์ผ ํ์์ต๋๋ค.
๊ทธ๋ผ ์ด๋ ๊ฒ ๊ฐ์ฒด์ ๋ณด๋ฅผ this๋ก ์ฌ์ฉํ ์ ์๊ฒ ๋์์ฃ
โ ํ์ดํ ํจ์์๋ this ๊ฐ ์๋ค!
const btn = document.getElementById('btn')
var obj = {
count : 0,
setCounter : function() {
console.log(this.count);
btn.addEventListener('click', function() {
console.log(this)
}.bind(this))
}
};
obj.setCounter();
ํ์ดํํจ์๋ this๋ฅผ ๊ฐ์ง๊ณ ์์ง ์๊ธฐ ๋๋ฌธ์ ํ์ดํ ํจ์ ๋ด์์ this๊ฐ ์ฌ์ฉ๋์๋ค๋ฉด ๊ทธ this๊ฐ ๋ฌด์์ธ์ง๋ฅผ ์ฐพ์ผ๋ฌ ์ฌ๋ผ๊ฐ๋๋ค.
์ฆ setCounter์ด๋ผ๋ ํจ์๊ฐ ์คํ๋ ๋์ this๊ฐ ํ์ดํ ํจ์ ๋ด์์์ this๊ฐ ๋๋ ๊ฒ์ด์ฃ . ๊ทธ๋์ button ๋ด์์ bind ์์ด this๋ฅผ ์ฌ์ฉํด๋ button์ ์ ๋ณด๊ฐ ์๋ obj ๊ฐ์ฒด์ ์ ๋ณด๋ฅผ ๋ฐ์ ์ ์๊ฒ ๋๋ ๊ฒ์ ๋๋ค.
์ฒ์์ ํ์ดํ ํจ์์๋ this ๊ฐ ์๋ค๊ณ ํ๊ธธ๋ ์๋๋ฐ ์ฐ๋ฉด ์ค๋ฅ๋์ผํ๋๊ฒ ์๋๊ฐ ํ๋ 1์ฐจ์์ ์ธ ์๊ฐ์ ํ์๋๋ฐ ํ์ดํ ํจ์ ๋ด์์ ๊ฐ์ง๊ณ ์๋ this ์ ๋ณด๊ฐ ์์ผ๋ ์๋ค๊ณ ๋งํ ์๋ ์๊ฒ ๋ค ์๊ฐ์ด ๋๋ค์ ใ ใ
'javascript > ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
2.2 class์ ๊ธฐ๋ณธ ์ ์ธ (0) | 2018.12.05 |
---|---|
2.1 classes ์ด์ prototype (0) | 2018.12.03 |
1.3 ํ์ดํ ํจ์์์์ arguments (0) | 2018.12.03 |
1.1 ํ์ดํํจ์์ ๊ธฐ๋ณธ ์ ์ธ (0) | 2018.11.28 |
ECMAScript 6 ํํ ๋ฆฌ์ผ ์๊ฐ (0) | 2018.11.28 |
- Total
- Today
- Yesterday
- Promise bulk
- ํ๋ก๊ทธ๋๋จธ์ค
- Spring Async
- backend-framework
- JavaScript
- typeorm
- node.js backend
- foreignkey
- ์๊ณ ๋ฆฌ์ฆ
- Request_Limit_Exceeded
- Promise error
- nestjs config
- node.js
- @nestjs/config
- nestjs configService
- nestjs project
- ๋น๋๊ธฐ ์์ฒญ
- Spring
- sequelize
- nestjs typeorm
- typeorm ์ฐ๊ฒฐ
- nestjs doc
- android
- nestjs directory
- nestjs module
- NestJS
- docker mysql
- DeferredResult
- nestjs/cli
- ๊ธฐ์์ฒญAPI
์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |