#optional

자바스크립트는 유연하고 강력한 언어로, ‘this’ 키워드와 프로토타입 체이닝은 중요한 개념입니다. 이 두 가지는 자바스크립트에서 객체지향 프로그래밍을 구현하는 데에 필수적인 도구입니다.

‘this’ 키워드

‘this’ 키워드는 함수가 호출될 때 그 함수가 속한 객체를 참조하는 용도로 사용됩니다. 자바스크립트에서는 동적 바인딩이 이루어지기 때문에, 함수가 호출될 때마다 ‘this’는 다른 객체를 가리킬 수 있습니다.

가장 일반적으로 ‘this’ 키워드는 메서드 내부에서 사용됩니다. 메서드는 객체에 속한 함수를 의미하며, 객체를 생성하고 사용하는 행위를 캡슐화합니다. 이러한 메서드에서 ‘this’는 해당 메서드를 호출한 객체를 참조합니다.

const obj = {
  name: 'John',
  hello: function() {
    console.log('Hello, ' + this.name + '!');
  }
};

obj.hello(); // 출력: Hello, John!

하지만 ‘this’ 키워드는 메서드 내부에서만 사용되는 것이 아닙니다. 함수가 즉시 호출된다면 ‘this’는 전역 객체(window 객체나 Node.js의 global 객체)를 참조하게 됩니다. 또한, ‘this’ 키워드는 이벤트 핸들러에서도 사용될 수 있습니다.

프로토타입 체이닝

자바스크립트의 객체는 프로토타입 체인으로 연결되어 있습니다. 객체는 프로토타입 객체의 속성과 메서드에 접근할 수 있으며, 이러한 체인 구조를 프로토타입 체이닝이라고 합니다.

프로토타입 체이닝은 객체가 속성 또는 메서드에 접근할 때, 해당 객체의 프로토타입 체인을 따라가며 검색을 수행합니다. 이는 객체의 프로퍼티를 상속받는 개념으로 이해할 수 있습니다.

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

Person.prototype.greet = function() {
  console.log('Hello, ' + this.name + '!');
};

const john = new Person('John');
john.greet(); // 출력: Hello, John!

위의 예제에서 Person 함수를 생성자로 사용하여 john 객체를 생성하였습니다. 이때 Person.prototype 객체에 정의된 greet 메서드를 john 객체에서 호출할 수 있습니다. 이는 프로토타입 체이닝을 통해 가능합니다.

결론

‘this’ 키워드와 프로토타입 체이닝은 자바스크립트에서 객체지향 프로그래밍을 할 때 핵심적인 개념입니다. ‘this’를 올바르게 이해하고 사용하면 객체 내부에서 속성과 메서드에 접근할 수 있으며, 프로토타입 체이닝을 이해하면 객체들 간에 속성과 메서드를 상속하고 공유할 수 있습니다.