[JavaScript] this란? /this 바인딩이란

this란??

JavaScript에서 this는 현재 실행 중인 함수 내에서 참조하는 객체를 나타냅니다.

this는 호출되는 방법에 따라 달라지며, 함수가 호출되는 방법에 따라 다른 객체가 this를 가리킵니다.

this는 자바스크립트의 중요한 개념 중 하나이며, 오해하거나 이해하지 못하면 코드에서 버그를 일으킬 수 있습니다.

 

this 바인딩

함수를 호출하는 방법에는 네 가지가 있습니다.

1. 일반 함수로 호출하는 경우
2. 메소드로 호출하는 경우
3. apply() 또는 call() 메소드를 사용하여 호출하는 경우
4. 생성자 함수로 객체를 생성하는 경우

이제 각각의 경우를 자세히 살펴보겠습니다.

 

1. 일반 함수로 호출하는 경우

함수를 일반적인 방법으로 호출하는 경우, this는 전역 객체를 가리킵니다.

브라우저에서는 window 객체, Node.js에서는 global 객체가 전역 객체입니다.

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

greet(); // window (브라우저) 또는 global (Node.js)

 

2. 메소드로 호출하는 경우

메소드는 객체 내부에서 정의된 함수입니다. 메소드 내부에서 this를 사용하면 해당 메소드를 호출한 객체를 가리킵니다.

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // "Hello, my name is Alice"를 출력합니다.

위 예제에서 greet 메소드 내부에서 this는 person 객체를 가리킵니다.

 

3. apply() 또는 call() 메소드를 사용하여 호출하는 경우

apply() 또는 call() 메소드를 사용하여 함수를 호출하는 경우, this는 해당 메소드의 첫 번째 인수로 전달된 객체를 가리킵니다.

apply()와 call()의 차이점은 인수를 전달하는 방식입니다.

apply()는 배열로 인수를 전달하고, call()은 쉼표로 구분된 인수를 전달합니다.

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

const person = {
  name: 'Alice'
};

greet.apply(person); // "Hello, my name is Alice"를 출력합니다.
greet.call(person); // "Hello, my name is Alice"를 출력합니다.

위 예제에서 apply()와 call() 메소드를 사용하여 greet 함수를 호출하고 있습니다. 이 경우 this는 person 객체를 가리킵니다.

4. 생성자 함수로 객체를 생성하는 경우

생성자 함수는 객체를 생성하기 위해 사용되는 함수로, new 연산자를 사용하여 호출됩니다.

생성자 함수 내에서 this 키워드를 사용하여 새로 생성된 객체에 접근할 수 있습니다.

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;

  this.getMake = function() {
    return this.make;
  };

  this.getModel = function() {
    return this.model;
  };

  this.getYear = function() {
    return this.year;
  };
}

var car1 = new Car("Toyota", "Corolla", 2019);
var car2 = new Car("Honda", "Accord", 2020);

console.log(car1.getMake()); // 출력 결과: Toyota
console.log(car2.getModel()); // 출력 결과: Accord

 

위의 코드에서 Car 생성자 함수는 자동차의 제조사, 모델, 연식을 인자로 받아서 객체를 생성합니다.

this 키워드를 사용하여 생성된 객체의 속성을 설정하고, getMake(), getModel(), getYear() 메서드를 정의합니다.

이후 new 연산자를 사용하여 Car 생성자 함수를 호출하면, 새로운 객체가 생성되고 this는 해당 객체를 참조하게 됩니다.

이렇게 생성된 객체는 car1, car2 변수에 저장되고, getMake(), getModel(), getYear() 메서드를 호출할 수 있습니다.

 

 

this 키워드를 올바르게 이해하면, 객체 지향 프로그래밍에서 메서드를 작성하고 객체 간 상호작용을 구현하는 등의 작업에서 매우 유용합니다. 따라서 JavaScript를 사용하여 프로그래밍할 때는 this의 개념과 동작 방식에 대해 이해하고 활용할 수 있도록 해야 합니다.