---

this란 무엇인가?

---

• 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.
• this는 "지금 내가 가리키고 있는 것"이다. 어떤 객체인지에 따라 다르게 가리킨다. (this 바인딩)
• 객체에서의 this 사용 예시

const dog = {
  name: "코코",
  sayName: function() {
    console.log(this.name);
  }
};

dog.sayName(); // 코코

• 생성자 함수에서의 this 사용 예시

function Dog(name) {
  this.name = name;
}

const myDog = new Dog("초코");
console.log(myDog.name); // 초코

• 예를 들어, 집에 두 마리의 강아지가 있을 때 한 마리의 이름은 "코코"이고, 다른 한 마리는 "초코"이다. 각 강아지에게 "이름을 말해봐!"라고 말하면, 코코는 "내 이름은 코코야!"라고 말할 것이고, 초코는 "내 이름은 초코야!"라고 말한다. 이때, "내"라는 말은 this와 비슷하다. 코코가 "내 이름"이라고 말할 때 this는 코코를 가리키고, 초코가 "내 이름"이라고 말할 때 this는 초코를 가리킨다.

---

왜 this를 사용하는가?

---

• this가 필요한 이유는 자바스크립트에서 객체 내부의 메서드가 그 객체의 프로퍼티이나 다른 메서드에 쉽게 접근할 수 있도록 하기 위해서다. 만약 this가 없다면, 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조하고 매번 객체의 이름을 명시적으로 사용해야 한다.
• this를 사용하지 않고 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다.

const circle = {
  // 프로퍼티: 객체 고유의 상태 데이터
  radius: 5,
  // 메서드: 상태 데이터를 참조하고 조작하는 동작
  getDiameter() {
    // 이 메서드가 자신이 속한 객체의 프로퍼티나 다른 메서드를 참조하려면
    // 자신이 속한 객체인 circle을 참조할 수 있어야 한다.
    return 2 * circle.radius;
  },
};

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

• 하지만 이러한 방법은 객체가 변경되거나, 이름이 바뀌거나, 메서드가 다른 객체에 복사될 때 문제가 생길 수 있기 때문에 코드의 유지보수성과 재사용성을 저하시킨다.
• 만약 this를 사용하지 않고 객체를 가리키는 식별자를 재귀적으로 참조했을 때 메서드가 다른 객체에 복사될 경우, 아래와 같은 문제가 발생할 수 있다.

const circle = {
  radius: 5,
  getDiameter() {
    return 2 * circle.radius;
  },
};

const sphere = {
  radius: 10,
};

// 메서드를 다른 객체에 복사함
sphere.getDiameter = circle.getDiameter;

// getDiameter 메서드는 circle.radius를 참조하고 있으므로,
// 20(sphere.radius*2)이 아닌 10(circle.radius*2)이 출력된다.
console.log(sphere.getDiameter()); // 10

• 또한, 객체 리터럴에서는객체 리터럴 방식에서는 객체가 정의되자마자 메모리에 생성되고, 그 객체를 가리키는 식별자가 바로 사용 가능하기 때문에 재귀적으로 참조가 가능하지만 생성자 함수에서는 생성자 함수는 새로운 객체(인스턴스)를 생성하기 위한 함수이기 때문에 생성자 함수가 호출되기 전까지는 그 함수가 생성할 인스턴스는 존재하지 않아 재귀적으로 참조할 수 없어 this가 필요하다.
• 결론 : this는 메서드가 속한 객체를 동적으로 참조할 수 있게 해준다. 즉, 객체가 변경되거나, 메서드가 다른 객체에 복사되더라도, this를 사용하면 항상 현재 메서드가 속한 객체를 참조할 수 있기 때문에, 위에서 언급한 문제들을 자연스럽게 해결할 수 있다.

---

this는 어떻게 사용하는가?

---

• 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 함수 내부에서 arguments 객체를 지역 변수처럼 사용할 수 있는 것처럼 this도 지역 변수처럼 사용할 수 있다.
• 클래스 기반 언어에서 this는 언제나 클래스가 생성하는 인스턴스를 가리킨다. 하지만 자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩될 값, 즉 this 바인딩이 동적으로 결정된다. 또한 strict mode(엄격 모드) 역시 this 바인딩에 영향을 준다. 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
• this는 코드 어디에서든 참조 가능하다.

일반 함수의 this

• 일반 함수에서 this는 전역 객체가 바인딩된다.
• this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 객체를 생성하지 않는 일반 함수에서 this는 의미가 없다.

function foo() {
  console.log("foo's this: ", this); // window
  function bar() {
    console.log("bar's this: ", this); // window
  }
  bar();
}
foo();

• strict mode가 적용된 일반 함수 내부의 this는 undefind가 바인딩된다.

function foo() {
  "use strict";

  console.log("foo's this: ", this); // undefined
  function bar() {
    console.log("bar's this: ", this); // undefined
  }
  bar();
}
foo();

• 전역 함수, 중첩 함수(함수 안에 함수), 콜백함수라도 일반 함수로 호출하면 함수 내부의 this에는 모두 전역 객체가 바인딩된다.
• 하지만 중첩 함수, 콜백 함수는 외부 함수를 돕는 헬퍼 함수의 역할을 하므로 외부 함수의 일부 로직을 대신하는 경우가 대부분이다. 그렇기 때문에 메서드의 this 바인딩과 일치시키기 위한 방법이 존재한다.

var value = 1;

const obj = {
  value: 100,
  foo() {
    // this 바인딩(obj)을 변수 that에 할당한다.
    const that = this;
    
    // 콜백 함수 내부에서 this 대신 that을 참조한다.
    setTimeout(function () {
      console.log(that.value); // 100
    }, 100);
  }
};

obj.foo();

• 위 방법 말고도 자바스크립트는 this를 명시적으로 할당할 수 있는 apply, call, bind 메소드를 제공한다.

Function.prototype.apply/call/bind 메서드

• apply, call, bind 메서드는 Function.prototype의 메서드다. 즉, 모든 함수가 상속받아 사용할 수 있다.
• apply, call 메서드는 this로 사용할 객체와 인수 리스트를 인수로 전달받아 함수를 호출한다.

function getThisBinding() {
  return this;
}

// this로 사용할 객체
const thisArg = { a: 1 };

console.log(getThisBinding()); // window

// getThisBinding 함수를 호출하면서 인수로 전달한 객체를 getThisBinding 함수의 this에 바인딩한다.
console.log(getThisBinding.apply(thisArg)); // {a:1}
console.log(getThisBinding.call(thisArg)); // {a:1}

• apply 메서드는 호출할 함수의 인수를 배열로 묶어 전달한다. call 메서드는 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달한다. 2개의 메서드는 호출할 함수에 인수를 전달하는 방식만 다를 뿐 this로 사용할 객체를 전달하면서 함수를 호출하는 것은 동일하다.
• 2개의 메서드의 대표적인 용도는 arguments 객체와 같은 유사 배열 객체에 배열 메서드를 사용하는 경우다.

function converArgsToArray() {
  console.log(arguments);

  // 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];

• bind 메서드는 apply와 call 메서드와 달리 함수를 호출하지 않는다. 다만 첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해 반환한다.

function getThisBinding() {
  return this;
}

// this로 사용할 객체
const thisArg = { a: 1 };

// bind 메서드는 첫 번째 인수로 전달한 thisArg로 this 바인딩이 교체된
// getThisBinding 함수를 새롭게 생성해 반환한다.
console.log(getThisBinding.bind(thisArg)); // getThisBinding
// bind 메서드는 함수를 호출하지는 않으므로 명시적으로 호출해야 한다.
console.log(getThisBinding.bind(thisArg)); // {a:1}

• bind 메서드는 메서드의 this와 메서드 내부의 중첩 함수 또는 콜백 함수의 this가 불일치하는 문제를 해결하기 위해 유용하게 사용된다.

const person = {
    name: 'Lee';
    foo(callback) {
        // bind 메서드로 callback 함수 내부의 this 바인딩을 전달
        setTimeout(callback.bind(this), 100);
        // 아래와 같이 호출하면 아래 person.foo의 console.log는 window.name이 출력된다.
        // setTimeout(callback, 100);
    }
};

person.foo(funciton () {
    console.log(`Hi my name is ${this.name}`); // Hi my name is Lee
})

메서드의 this

• 메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩된다.

const person = {
  name: "Lee",
  getName() {
    // 메서드 내부의 this는 메서드를 호출한 객체에 바인딩된다.
    return this.name;
  },
};

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

• person 객체의 getName 프로퍼티가 가리키는 함수 객체는 person 객체에 포함된 것이 아니라 독립적으로 존재하는 별도의 객체다. getName 프로퍼티가 함수 객체를 가리키고 있을 뿐이다.
• 따라서 getName 프로퍼티가 가리키는 함수 객체, 즉 getName 메서드는 다른 객체의 프로퍼티에 할당하는 것으로 다른 객체의 메서드가 될 수도 있고 일반 변수에 할당하여 일반 함수로 호출될 수도 있다.

const anotherPerson = {
  name: "Kim",
};

// getName 메서드를 anotherPerson 객체의 메서드로 할당
anotherPerson.getName = person.getName;

// getName 메서드를 호출한 객체는 anotherPerson이다.
console.log(anotherPerson.getName()); // Kim

// getName 메서드를 변수에 할당
const getName = person.getName;

// getName 메서드를 일반 함수로 호출
console.log(getName()); // ''
// 일반 함수로 호출된 getName 함수 내부의 this.name은 브라우저 환경에서 window.name과 같다.
// 브라우저 환경에서 window.name은 브라우저 창의 이름을 나타내는 빌트인 프로퍼티이며 기본값은 ''이다.
// Node.js 환경에서 this.name은 undefined이다.

• 프로토타입 메서드 내부에서 사용된 this도 일반 메서드와 마찬가지로 해당 메서드를 호출한 객체에 바인딩된다.

function Person(name) {
  this.name = name;
}

Person.prototype.getName = function () {
  return this.name;
};

const me = new Person("Lee");

// getName 메서드를 호출한 객체는 me다.
console.log(me.getName()); // Lee

Person.prototype.name = "Kim";

// getName 메서드를 호출한 객체를 Person.prototype이다.
console.log(Person.prototype.getName()); // Kim

생성자 함수의 this

• 생성자 함수 내부의 this에는 생성자 함수가 (미래에) 생성할 인스턴스가 바인딩된다.

// 생성자 함수
function Circle(radius) {
  // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
  this.radius = raduis;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

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

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

• 출처 : (책)모던자바스크립트 딥다이브