모던 자바스크립트 딥다이브, 면접과 함께 공부하기 - 22장 빌트인 객체

💡 아래 내용은 모던 자바스크립트 딥다이브를 공부하며 이해했던 내용을 다루고 있습니다. 혹시 틀렸거나 잘못된 정보가 있다면 알려주세요!

📌 22장 this

22.1 this 키워드

this는 현재 실행 컨텍스트에 따라 동적으로 바뀝니다. this의 값은 함수가 어떻게 호출되었는지에 따라 결정됩니다.

22.2 함수 호출 방식과 this 바인딩

22.2.1 일반 함수 호출

함수를 일반적인 방식으로 후출하면 this는 전역 객체를 가리킵니다. 이는 브라우저 환경에서는 window객체, Node.js 환경에서는 global 객체가 됩니다. (단, use strict 모드에서는 undefined)

function myFunction() {
  console.log(this);
}

myFunction();  // 일반 함수 호출시, 'this'는 전역 객체(window 또는 global)를 가리킵니다.

22.2.2 메서드 호출

메서드는 객체에 연결된 함수를 말합니다. 메서드를 호출할 때, this는 메서드를 호출한 객체를 가리킵니다.

let myObject = {
  name: "My Object",
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

myObject.sayHello();  // "Hello, my name is My Object"

단, 객체의 메서드를 다른 변수에 할당하고 그 변수를 통해 함수를 호출하면, this는 전역 객체를 가리키게 됩니다. 이는 함수가 어떻게 호출되었는지에 따라 this가 결정되기 때문입니다.

let myObject = {
  name: "My Object",
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

let sayHello = myObject.sayHello;
sayHello();  // "Hello, my name is undefined"

22.2.3 생성자 함수 호출

자바스크립트에서 생성자 함수를 사용하여 객체를 생성할 때, this는 새로 생성된 객체를 가리킵니다. 이를 '생성자 함수 호출에서의 this 바인딩'이라고 합니다. (단, 생성자 함수를 new 연산자 없이 호출하면, this는 전역 객체를 가리키게 됩니다.)

function Person(name) {
  this.name = name;
  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
  };
}

let john = new Person('John');
john.sayHello();  // "Hello, my name is John"

22.2.4 Function.prototype.apply/call/bind 메서드에 의한 간접 호출

Function.prototype.apply, Function.prototype.call, 그리고 Function.prototype.bind 메서드는 모두 함수를 호출하는 방식을 커스텀하게 제어하고, this를 특정 객체에 바인딩할 수 있도록 합니다. 이를 간접 호출이라고 합니다.

1. apply: 첫 번째 인자로 this에 바인딩할 객체를 전달하고, 두 번째 인자로 함수에 전달할 인자들의 배열을 전달합니다.

2. call: 첫 번째 인자로 this에 바인딩할 객체를 전달하고, 그 다음 인자부터는 함수에 직접 전달합니다.

3. bind: 함수에 this와 인자를 미리 바인딩한 새로운 함수를 반환합니다. 이 방식은 특히 콜백 함수에서 유용하게 사용됩니다.

var obj = {name: 'John'};

function greet(msg) {
  console.log(`${msg}, ${this.name}`);
}

// apply 사용 예시
greet.apply(obj, ['Hello']);  // "Hello, John"

// call 사용 예시
greet.call(obj, 'Hello');  // "Hello, John"

// bind 사용 예시
var boundGreet = greet.bind(obj);
boundGreet('Hello');  // "Hello, John"