객체는 상태(state)를 나타내는 프로퍼티(Property)와 동작(behavior)을 나타내는 메서드(Method)를 하나의 논리적 단위로 묶은 복합적 자료구조라 했죠? 이때 메서드가 내부 프로퍼티를 제어하기 위해선 자신이 속한 객체를 가리키는 `무언가`가 존재해야 합니다. 저희는 이 무언가인 **this**에 대해 알아봅니다.

잠깐 객체 리터럴의 경우를 생각해봅시다. 우리는 객체를 생성하여 내부 메서드를 정의하면 메서드 내부에서 자신이 속한 객체의 식별자를 참조할 수 있었습니다.

- `객체 리터럴 방식`으로 선언한 경우

```js

const circle = {

// 프로퍼티: 객체 고유의 상태 데이터

radius: 5,

// 메서드: 상태 데이터를 참조하고 조작하는 동작

getDiameter() {

// 자신이 속한 객체인 circle을 참조합니다.

return 2 * circle.radius;

}

};

console.log(circle.getDiameter()); // 10

```

- `getDiameter`를 호출하면 circle을 재귀적으로 호출하죠? 즉, 이 참조 표현식이 평가되는 시점은 getDiameter 메서드가 호출되어 함수 몸체가 실행되는 시점입니다.

객체 리터럴은 변수에 할당되기 전에 평가되는 것은 계속 언급해왔죠? 즉 getDiameter가 호출되는 시점에는 객체가 생성된 시점이므로 메서드 내부에서 해당 식별자(위 예제의 경우 circle)를 참조할 수 있는 것이죠. 하지만 내가 속한 객체를 재귀적으로 참조한다는 것은 당연히 권장되지 않습니다.

- `생성자 함수 방식`으로 선언한 경우

```js

function Circle(radius) {

// 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없죠?

????.radius = radius;

}

Circle.prototype.getDiameter = function () {

// 여기도 마찬가지입니다.

return 2 * ????.radius;

};

// 생성자 함수로 인스턴스를 생성합니다.

const circle = new Circle(5);

```

5. **this가 가리키는 값, `this 바인딩`은 함수 호출 방식에 따라 동적으로 결정됩니다**.

- `객체 리터럴 방식`으로 선언한 경우

```js

const circle = {

// 프로퍼티: 객체 고유의 상태 데이터

radius: 5,

// 메서드: 상태 데이터를 참조하고 조작하는 동작

getDiameter() {

// 자신이 속한 객체인 circle을 참조합니다.

return 2 * this.radius;

}

};

console.log(circle.getDiameter()); // 10

```

- `생성자 함수 방식`으로 선언한 경우

```js

function Circle(radius) {

// 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없죠?

this.radius = radius;

}

Circle.prototype.getDiameter = function () {

// 여기도 마찬가지입니다.

return 2 * this.radius;

};

// 생성자 함수로 인스턴스를 생성합니다.

const circle = new Circle(5);

```

this 바인딩이란 식별자와 값을 연결하는 과정으로, this(키워드이나 식별자로 분류돼요)와 this가 가리킬 객체를 연결하는 것입니다. `클래스 기반 언어`는 이 this가 가리키는 대상이 `클래스가 생성하는 인스턴스`이지만 자바스크립트는 함수 호출 방식에 따라 다르다는 것을 유의해주세요.

|`일반 함수` 호출|**전역** 객체|

|`메서드` 호출|메서드를 **호출**한 객체|

|`생성자 함수` 호출|생성자 함수가 **미래에 생성할 인스턴스**|

|Function.prototype.apply/call/bind<br>메서드에 의한 `간접` 호출|Function.prototype.apply/call/bind<br>메서드에 첫 번째 인수로 전달된 객체|

```js

function foo() {

console.log(this); // window

function bar() {

console.log(this); // window

}

"use strict";

function bar2(){

console.log(this); // undefined

}

bar();

}

foo();

var value = 1;

const obj = {

value: 100,

foo() {

console.log(this); // {value: 100, foo: ƒ}

console.log(this.value); // 100

function bar() {

console.log(this); // window

console.log(this.value); // 1

}

bar();

}

};

obj.foo();

const obj = {

value: 100,

foo() {

console.log(this); // {value: 100, foo: ƒ}

setTimeout(function () {

console.log(this); // window

console.log(this.value); // 1

}, 100);

}

};

obj.foo();

당연히 this가 전역 객체에만 바인딩 되는 것은 문제가 있으므로, 메서드의 내부 함수나 콜백 함수의 this 바인딩을 메서드의 this와 일치시키기 위해서는 `this 식별자를 변수에 할당`하거나 `apply/call/bind 메서드`, `화살표 함수`를 사용해주세요.

```js

var value = 1;

const obj = {

value: 100,

foo() {

const that = this;

setTimeout(function () {

console.log(that.value); // 100

}, 100);

}

};

obj.foo();

```

```js

var value = 1;

const obj = {

value: 100,

foo() {

setTimeout(function () {

console.log(this.value); // 100

}.bind(this), 100);

}

};

obj.foo();

```

```js

var value = 1;

const obj = {

value: 100,

value2 : this.value // 1

foo() {

setTimeout(() => console.log(this.value), 100); // 100

}

};

obj.foo();

```

```js

const person = {

name: 'amy',

getName() {

return this.name;

}

};

console.log(person.getName()); // amy

const anotherPerson = {

name: 'james'

};

anotherPerson.getName = person.getName;

console.log(anotherPerson.getName()); // james

const getName = person.getName;

console.log(getName()); // ''

일반 함수로 호출된 `getName` 함수 내부의 `this.name`은 전역 객체의 프로퍼티 `window.name`과 같고, 브라우저의 window.name은 브라우저 창의 이름을 나타내는 빌트인 프로퍼티입니다. 따라서 기본값은 `''`이 돼요(Node.js는 `undefined`).

```js

function Person(name) {

this.name = name;

}

Person.prototype.getName = function () {

return this.name;

};

const me = new Person('amy');

console.log(me.getName()); // amy

Person.prototype.name = 'james';

console.log(Person.prototype.getName()); // james

```js

function Circle(radius) {

this.radius = radius;

this.getDiameter = function () {

return 2 * this.radius;

};

}

const circle1 = new Circle(5);

console.log(circle1.getDiameter()); // 10

const circle2 = new Circle(10);

console.log(circle2.getDiameter()); // 20

apply, call은 `this로 사용할 객체와 인수 리스트`를, bind는 `this만`을 인수로 받습니다.

- apply : `Function.prototype.apply(thisArg[, argsArray])`

- call : `Function.prototype.call(thisArg[, arg1[, arg2[, ...]]])`

- bind : `Function.prototype.bind(thisArg)`

```js

function getThisBinding() {

console.log(arguments);

return this;

}

// this로 사용할 객체

const thisArg = { a: 1 };

// 1. apply 메서드는 호출할 함수의 인수를 배열로 묶어 전달

console.log(getThisBinding.apply(thisArg, [1, 2, 3]));

// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// {a: 1}

// 2. call 메서드는 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달

console.log(getThisBinding.call(thisArg, 1, 2, 3));

// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// {a: 1}

```

```js

// 1. arguments 객체를 배열로 변환

function convertArgsToArray() {

console.log(arguments);

// Array.prototype.slice를 인수없이 호출하면 배열의 복사본을 생성

const arr = Array.prototype.slice.call(arguments);

// const arr = Array.prototype.slice.apply(arguments);

console.log(arr);

return arr;

}

convertArgsToArray(1, 2, 3); // [1, 2, 3]

```

```js

const person = {

name: 'amy',

foo(callback) {

// bind 메서드로 callback 함수 내부의 this 바인딩 전달

setTimeout(callback.bind(this), 100);

}

};

person.foo(function () {

console.log(`Hi! ${this.name}.`); // Hi! amy.

});

```