[JavaScript] this란 무엇인가?

흩날리는추억·2024년 3월 22일

❓ this?

JavaScript에서 this는 현재 실행 중인 함수의 컨텍스트를 참조하는데 사용되는데 즉, 자신이 속한 객체를 가리키는 변수입니다.
this가 특정 객체에 연결되는 것을 바인딩이라고 하는데 함수를 호출하는 방식에 따라 this의 값이 달라집니다.

🔍 종류

전역 컨텍스트

전역 컨텍스트에서 this는 전역 객체 참조
브라우저에서는 window 객체이고, Node.js에서는 global 객체입니다.

함수 호출

함수가 일반적인 방법으로 호출될 때, this는 전역 객체 참조
내부함수의 경우에도 외부함수가 아닌 전역 객체 참조
메소드의 내부함수일 경우에도 this는 전연 객체 참조
콜백함수의 경우에도 this는 전역 객체 참조

메소드 호출

객체의 메소드로 호출될 때, 메소드 내부에서 this는 그 메소드가 속한 객체 참조

const obj1 = {
  name: 'Lee', // 속성
  sayName: function() { // 메서드
    console.log(this.name);
  }
}

const obj2 = {
  name: 'Kim'
}

obj2.sayName = obj1.sayName; // obj2에 메서드 할당

obj1.sayName(); // Lee
obj2.sayName(); // Kim

생성자 함수

생성자 함수로 호출될 때, this는 새로 생성된 객체 참조

// 생성자 함수 정의
function Person(name, age) {
  // 1. 생성자 함수의 코드가 실행되기 전 빈 객체가 생성
  // 생성자 함수 내에서 사용되는 this는 이 빈 객체를 가리킨다. 
  this.name = name;
  this.age = age;
  // 2. this는 새로 생성된 객체를 가리키므로 this를 통해 생성한 프로퍼티와 메소드는 새로 생성된 객체에 추가
  // 3. this에 바인딩된 새로 생성한 객체가 반환
}

// 새로운 객체 생성
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);

// 생성된 객체 출력
console.log(person1); // Person { name: 'Alice', age: 30 }
console.log(person2); // Person { name: 'Bob', age: 25 }

만약 생성자 함수에 new 연산자를 붙이지 않고 호출하면 결과는 일반 함수를 호출했을 때와 같이 전역 객체 참조합니다.

🛠️ call, apply, bind

call, apply, bind: call, apply, bind 메소드를 사용하여 명시적으로 this를 설정할 수 있습니다.

call()
함수를 호출하는 동시에 this 값을 지정
함수를 호출할 때 this 값과 함께 전달하려는 인수를 개별적으로 전달
apply()
함수를 호출하는 동시에 this 값을 지정
함수를 호출할 때 this 값과 함께 전달하려는 인수를 배열로 전달
bind()
함수를 호출하지 않고 새로운 함수를 생성 및 this 값 지정
새로운 함수가 호출되면 원본 함수의 this 값이 설정
추가적인 인수를 전달하여 호출될 때 인수 고정 가능

const obj1 = { name: '지원' };
const obj2 = { name: '지호' };

function sayName(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}

// call 메소드 사용
sayName.call(obj1, 'Hello'); // Hello, 지원!
sayName.call(obj2, 'Hi');    // Hi, 지호!

// apply 메소드 사용
sayName.apply(obj1, ['안녕하세요']); // 안녕하세요, 지원!
sayName.apply(obj2, ['반갑습니다']);    // 반갑습니다, 지호!

// bind 메소드 사용
const sayHelloToAlice = sayName.bind(obj1, 'Hello');
const sayHiToBob = sayName.bind(obj2, 'Hi');

sayHelloToAlice(); // Hello, 지원!
sayHiToBob();      // Hi, 지호!