this

1
// 생성자 함수
2
function Circle(radius)
3
{
4
  // this는 생성자 함수가 생성할 인스턴스를 가리킨다.
5
  this.radius = radius;
6
}
7

8
Circle.prototype.getDiameter = function ()
9
{
10
  // this는 생성자 함수가 생성할 인스턴스를 가리킨다.
11
  return 2 * this.radius;
12
};
13

14
// 인스턴스 생성
15
const circle = new Circle(5);
16
console.log(circle.getDiameter()); // 10

1
// this는 어디서든지 참조 가능하다.
2
// 전역에서 this는 전역 객체 window를 가리킨다.
3
console.log(this); // window
4

5
function square(number)
6
{
7
  // 일반 함수 내부에서 this는 전역 객체 window를 가리킨다.
8
  console.log(this); // window
9
  return number * number;
10
}
11
square(2);
12

13
const person = {
14
  name: 'Lee',
15
  getName()
16
  {
17
    // 메서드 내부에서 this는 메서드를 호출한 객체를 가리킨다.
18
    console.log(this); // {name: "Lee", getName: ƒ}
19
    return this.name;
20
  }
21
};
22
console.log(person.getName()); // Lee
23

24
function Person(name)
25
{
26
  this.name = name;
27
  // 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
28
  console.log(this); // Person {name: "Lee"}
29
}
30

31
const me = new Person('Lee');

1
function foo()
2
{
3
  'use strict';
4

5
  console.log("foo's this: ", this);  // undefined
6
  function bar()
7
  {
8
    console.log("bar's this: ", this); // undefined
9
  }
10
  bar();
11
}
12
foo();

1
var value = 1;
2

3
const obj = {
4
  value: 100,
5
  foo()
6
  {
7
    // 화살표 함수 내부의 this는 상위 스코프의 this를 가리킨다.
8
    setTimeout(() => console.log(this.value), 100); // 100
9
  }
10
};
11

12
obj.foo();

1
const person = {
2
  name: 'Lee',
3
  getName() {
4
    // 메서드 내부의 this는 메서드를 호출한 객체에 바인딩된다.
5
    return this.name;
6
  }
7
};
8

9
// 메서드 getName을 호출한 객체는 person이다.
10
console.log(person.getName()); // Lee

1
// 생성자 함수
2
function Circle(radius) {
3
  // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
4
  this.radius = radius;
5
  this.getDiameter = function () {
6
    return 2 * this.radius;
7
  };
8
}
9

10
// 반지름이 5인 Circle 객체를 생성
11
const circle1 = new Circle(5);
12
// 반지름이 10인 Circle 객체를 생성
13
const circle2 = new Circle(10);
14

15
console.log(circle1.getDiameter()); // 10
16
console.log(circle2.getDiameter()); // 20
17
// new 연산자와 함께 호출하지 않으면 생성자 함수로 동작하지 않는다. 즉, 일반적인 함수의 호출이다.
18
const circle3 = Circle(15);
19

20
// 일반 함수로 호출된 Circle에는 반환문이 없으므로 암묵적으로 undefined를 반환한다.
21
console.log(circle3); // undefined
22

23
// 일반 함수로 호출된 Circle 내부의 this는 전역 객체를 가리킨다.
24
console.log(radius); // 15