docs: 22장 요약 정리

docs/22_this/김다은.md

@@ -0,0 +1,106 @@
+# 22장 this
+
+## 1. this 키워드
+
+> **자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수**.
+
+객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. 메서드가 호출되는 시점에는 이미 객체 리터럴의 평가가 완료되어 식별자에 객체가 할당되었기 때문인데, 이런 방식은 일반적이지 않으며 바람직하지 않다.
+
+```js
+const circle = {
+  radius: 5,
+  getDiameter() {
+    // 재귀적 참조
+    return 2 * circle.radius;
+  },
+};
+
+console.log(circle.getDiameter());
+```
+
+this는 코드 어디에서든 참조 가능하다. 하지만 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.
+
+<br/>
+
+## 2. 함수 호출 방식과 this 바인딩
+
+this 바인딩은 **함수 호출 방식에 의해 동적으로 결정되기 때문에 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다**. 주의할 것은 동일한 함수도 다양한 방식으로 호출할 수 있으며, 이에 따라 this 바인딩이 다르게 결정된다는 것이다.
+
+- 일반 함수 호출
+- 메서드 호출
+- 생성자 함수 호출
+- Function.prototype.apply/call/bind 메서드에 의한 간접 호출
+
+### 1. 일반 함수 호출
+
+> 기본적으로 this에는 전역 객체가 바인딩된다.
+
+객체를 생성하지 않는 일반 함수에서 this는 의미가 없기 때문에 전역 객체 혹은 undefined(strict mode에서)이 바인딩된다. 이는 중첩 함수 또는 콜백 함수도 마찬가지여서 외부 메서드와 this에 바인딩된 객체가 일치하지 않는다는 특징 때문에 동작하기 어렵게 된다. 이런 경우 중첩 함수나 콜백 함수의 this 바인딩을 메서드의 this 바인딩과 일치시키기 위해서는 다음과 같은 코드가 필요하다.
+
+```js
+var value = 1;
+
+const obj = {
+  value: 100,
+  foo() {
+    // foo에서의 this는 객체 obj이다.
+    const that = this;
+
+    setTimeout(function () {
+      // this 대신 that을 참조
+      console.log(that.value); // 100
+    }, 100);
+  },
+};
+```
+
+### 2. 메서드 호출
+
+> 메서드를 호출할 때 메서드 이름 앞의 마침표(.) 연산자 앞에 기술한 객체가 바인딩된다.
+
+```js
+// 메서드 getName을 호출한 객체는 person이므로 person이 this가 된다.
+const person = {
+  name: 'Lee',
+  getName() {
+    return this.name;
+  },
+};
+
+console.log(person.getName()); // Lee
+
+// 메서드를 다른 객체에 할당하고 그 객체를 사용해 호출하면 해당 객체가 바인딩된다.
+const anotherPerson = {
+  name: 'Kim',
+};
+anotherPerson.getName = person.getName;
+
+console.log(anotherPerson.getName());
+
+// 만약 일반 변수에 할당하면 일반 함수로 호출되어 global 객체가 바인딩된다.
+const getName = person.getName;
+
+console.log(getName()); // window.name;과 같기 때문
+```
+
+### 3. 생성자 함수 호출
+
+> 생성자 함수가 미래에 생성할 인스턴스가 바인딩된다.
+
+```js
+function Circle(radius) {
+  this.radius = radius;
+  this.getDiameter = function () {
+    return 2 * this.radius;
+  };
+}
+
+const circle = new Circle(5);
+
+console.log(circle.getDiameter()); // 10
+```
+
+### 4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출
+
+> apply/call 메서드는 본질적으로 함수를 호출하기 위한 것이다. 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩한다.  
+> bind 메서드는 함수를 호출하지 않지만 첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해 반환한다.