자바스크립트의 핵심 this

hsmurf·2024년 1월 26일

js this

javascript

목록 보기

2/3

this란?

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는
자기 참조 변수(self-referencing variable)

자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있고,
this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의
프로퍼티나 메서드를 참조할 수 있다.

this 바인딩

바인딩 : 식별자와 값을 연결하는 과정을 의미.

this 바인딩은 함수가 호출될 때 this가 가리킬 객체를 동적으로 결정하는 메커니즘.
함수의 호출 방식과 호출 시점에 따라 this가 다르게 바인딩되며,
이를 'this의 동적 바인딩'이라고 표현할 수 있다.

함수 호출 방식

1. 일반 함수 호출

기본적으로 this에는 전역 객체(global object)가 바인딩된다.

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

🔼 전역 함수는 물론 중첩 함수를 일반 함수로 호출하면 함수 내부의 this에는 전역 객체가 바인딩된다. this는 자기 참조 변수이므로 객체를 생성하지 않는 일반 함수에서는 의미가 없다..

🔽 따라서 strict mode가 적용된 일반 함수 내부의 this에는 undefined가 바인딩 됨

function foo() {
  'use strict';

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

메서드 내에서 정의한 중첩 함수와 콜백 함수가 일반 함수로 호출되면 this에는 전역 객체가 바인딩된다.

이처럼 일반 함수로 호출된 모든 함수(중첩 함수, 콜백 함수 포함) 내부의 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();

변수에 할당하는 방법말고 명시적으로 바인딩할 수 있는 apply/call/bind 메서드와
화살표 함수를 사용해서 일치시킬 수도 있다.

var value = 1;

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

obj.foo();

2. 메서드 호출

const obj1 = {
  name: 'Lee',
  sayName() {
    // 메서드 내부의 this는 메서드를 호출한 객체에 바인딩한다.
     console.log(this.name);
  }
}
// 메서드 sayName을 호출한 객체는 obj1이다.
obj1.sayName(); // Lee

const obj2 = {
  name: 'Kim'
}

// sayName 메서드를 obj2 객체의 메서드로 할당
obj2.sayName = obj1.sayName;

// sayName 메서드를 호출한 객체는 obj2
obj2.sayName(); // Kim

// sayName 메서드를 변수에 할당
const sayName = obj1.sayName;

// sayName 메서드를 일반 함수로 호출
sayName(); // ''
// 일반 함수로 호출된 sayName 함수 내부의 this.name는 브라우저 환경에서 window.name과 같다.

위 예제에서 obj1 객체의 sayName 프로퍼티가 가리키는 함수 객체는 obj1객체에 포함된 것이 아니라 독립적으로 존재하는 별도의 객체다. 즉, sayName 메서드는 프로퍼티에 바인딩된 함수다.

따라서 sayName 메서드는 다른 객체의 프로퍼티에 할당하는 것으로 다른 객체의 메서드가 될 수도 있고 일반 변수에 할당하여 일반 함수로 호출될 수도 있다.

결론은 메서드 내부의 this는 프로퍼티로 메서드를 가리키고 있는 객체와는 관계가 없고 메서드를 호출한 객체에 바인딩된다.

그리고 프로토타입 객체도 메소드를 가질 수 있는데,
프로토타입 객체 메소드 내부에서 사용된 this도 일반 메소드와 마찬가지로 해당 메서드를 호출한 객체에 바인딩된다.

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

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

var me = new Person('Lee');
console.log(me.getName()); // Lee
// 우선 프로토타입에서 name프로퍼티를 찾는다. 없으니 체이닝에 의해 me 객체에서 찾아서 반환


Person.prototype.name = 'Kim';
console.log(Person.prototype.getName()); // Kim
// 우선 프로토타입에서 name프로퍼티를 찾는다. 찾았으니 반환.

3. 생성자 함수 호출

생성자 함수는 말 그대로 객체(인스턴스)를 생성하는 역할을 한다.
기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작하며,
생성자 함수 내부의 this에는 생성자 함수가 (미래에) 생성할 객체(인스턴스)가 바인딩된다.

// 생성자 함수
function Person(name) {
  this.name = name;
}

var me = new Person('Lee');
console.log(me); // Person&nbsp;{name: "Lee"}

// new 연산자와 함께 생성자 함수를 호출하지 않으면 생성자 함수로 동작하지 않는다.
var you = Person('Kim');
console.log(you); // undefined

new 연산자와 함께 생성자 함수를 호출하면 this 바인딩이 메소드나 함수 호출 때와는 다르게 동작한다.

❗객체 리터럴 방식과 생성자 함수 방식의 차이

객체 리터럴 방식의 경우, 생성된 객체의 프로토타입 객체는 Object.prototype이다.
생성자 함수 방식의 경우, 생성된 객체의 프로토타입 객체는 Person.prototype이다.

4. apply/call/bind 메서드에 의한 간접 호출

apply/call 메서드는 this로 사용할 객체와 인수 리스트를 인수로 전달받아 함수를 호출한다.

apply와 call 메서드는 함수를 호출하면서 첫 번째 인수로 전달한
특정 객체를 호출한 함수의 this에 바인딩한다.

function getThisBinding() {
  console.log(arguments);
  return this;
}

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

// getThisBinding 함수를 호출하면서 인수로 전달한 객체를 getThisBinding 함수의 this에 바인딩한다.
// apply 메서드는 호출할 함수의 인수를 배열로 묶어 전달한다.
console.log(getThisBinding.apply(thisArg, [1, 2, 3]));
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// {a: 1}

// call 메서드는 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달한다.
console.log(getThisBinding.call(thisArg, 1, 2, 3));
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// {a: 1}

이처럼 apply와 call 메서드는 호출할 함수에 인수를 전달하는 방식만 다를 뿐
this로 사용할 객체를 전달하면서 함수를 호출하는 것은 동일하다.

apply와 call 메서드의 대표적인 용도는 arguments 객체와 같은 유사 배열 객체에
배열 메서드를 사용하는 경우이다.

function convertArgsToArray() {
  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(function () {
  console.log(`Hi! my name is ${this.name}.`); // Hi! my name is Lee.
});