1. this는 함수가 어떻게 호출되는지에 따라 동적으로 결정됩니다.
2. this의 주요 목적은 작성된 코드를 재사용하기 위해 존재하는데, 호출되는 방식에 따라 동적으로 결정되어 잘못된 로직을 작성할 수 있습니다.
3. this는 전역에서 사용할 수 있으며 함수 안에서도 사용할 수 있습니다.
4. 함수는 객체 안에 메소드로 정의, 생성자 함수로 사용, 특정 로직을 계산하여 값을 반환, 여러목적으로 사용할 수 있습니다.
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
this.valueA = 'a'
console.log(valueA) <-- 실행결과 a
valueB = 'b'
console.log(this.valueB) <-- 실행결과 b
function checkThis(){
console.log(this) <-- 실행결과 window
}
function checkThis2(){
'use strict';
console.log(this) <-- 실행결과 undefined
}
checkThis()
checkThis2()
function Product(name, price){
this.name = name
this.price = price
}
const product1 = Product('키보드' , 2000)
console.log(window.name) <-- 실행결과 키보드
console.log(window.price) <-- 실행결과 2000
const product2 = {
name : '키보드2',
price : 3000,
getVAT() {
return this.price / 10
}
}
const valueOfProduct2 = product2.getVAT()
console.log(valueOfProduct2) <-- 실행결과 300
const calVAT = product2.getVAT
const VAT2 = calVAT()
console.log(VAT2) <-- 실행결과 200
const newCalVAT = calVAT.bind(product2)
const VAT3 = newCalVAT()
console.log(VAT3) <-- 실행결과 300
const counter1 = {
count : 0,
addAfter1Sec(){
setTimeout(function() {
this.count += 1
console.log(this.count) <-- 실행결과 NaN
},1000)
}
}
counter1.addAfter1Sec()
const counter2 = {
count : 0,
addAfter1Sec(){
setTimeout(() => {
this.count += 1
console.log(this.count) <-- 실행결과 1
},1000)
}
}
counter2.addAfter1Sec()
1 ~ 4 코드 설명
브라우저 환경에서 this를 전역으로 사용하면 전역 객체인 Window 객체를 가리킵니다.
valueA는 window.valueA로 해석되고 console.log(valueA)는 console.log(window.valueA)로 해석이 됩니다.
6 ~ 14 코드 설명
함수에서 this를 사용하고 함수를 호출하면 this는 전역 객체인 Window를 가리킵니다. 하지만 함수안에 코드를 엄격한 모드로 실행하게 되면 this는 undefined가 됩니다.
16 ~ 22 코드 설명
Product 함수는 생성자 함수로 작성되었습니다. new 키워드 없이 호출하게 되면 이때 this는 전역객체인 Window를 가리킵니다.
new 키워드와 함께 호출해야지만 this는 프로토타입 객체와 연결된 객체가 반환이 됩니다.
26 ~ 32 코드 설명
객체 내의 정의된 함수인 메소드 안에서 this를 사용하고 객체를 통해 메소드를 호출하면 this는 그 객체를 가리킵니다.
34 ~ 36 코드 설명
메소드 안에서 this를 정의했지만 메소드를 다른 변수에 저장하고 그 변수를 통해 호출하면 일반적인 함수 호출이 되어 this는 전역 객체를 가리킵니다.
호출하는 시점에 .(점) 연산자와 함께 객체가 주어저야 메소드 안의 this가 호출의 주제인 객체가 됩니다.
38 ~ 40 코드 설명
this는 bind 메소드를 통해 전달한 인자값으로 변경할 수 있습니다.
this 외에 call, apply 메소드 또한 this가 가리키는 값을 변경할 수 있습니다.
42 ~ 51 코드 설명
메소드 안에서 중첩 함수로 함수가 작성을 했을 때 내부 함수의 this는 전역 객체를 가리킵니다.
그래서 1초 뒤 this.count는 window.count로 해석이 되어 undefined에 값을 더해 NaN이 콘솔에 출력됩니다.
53 ~ 62 코드 설명
화살표 함수에서 this를 사용하면 this는 부모 환경의 this를 가리킵니다.
그래서 중첩된 함수로 작성되었을 때 화살표 함수를 사용하면 화살표 함수는 부모 함수의 this와 같습니다.