[JavaScript] 메서드 호출 시 this 바인딩 규칙

메서드란

객체는 데이터와 기능을 함께 담기 위해 사용됩니다. 객체의 프로퍼티 중 함수를 할당한 것을 메서드라 부르며, 이를 통해 객체가 자신만의 동작을 수행할 수 있습니다.

메서드 생성하기

함수 표현식 메서드 생성

let person = {
  name: "Alice",
  age: 25
};

person.sayHello = function() {
  console.log("안녕하세요!");
};

person.sayHello(); // 출력: 안녕하세요!

메서드 축약 구문

let person = {
  name: "Alice",
  age: 25,
  sayHello() {
    console.log("안녕하세요!");
  }
};

person.sayHello(); // 출력: 안녕하세요!

this와 메서드 내부에서의 객체 참조

메서드를 작성할 때 this를 사용하면, 해당 메서드가 어느 객체의 일부로 호출되었는지에 따라 올바른 데이터를 참조할 수 있습니다. 이를 사용하지 않고 외부 변수 이름을 직접 사용하면, 문제가 발생할 수 있습니다.

let person = {
  name: "Alice",
  sayName() {
    console.log(person.name);
  }
};

let manager = person;
person = null; // person 변수를 null로 재할당

manager.sayName(); // 오류 발생: Cannot read property 'name' of null

this를 사용할 경우

let person = {
  name: "Alice",
  sayName() {
    console.log(this.name);
  }
};

let manager = person;
person = null; // person 변수를 null로 재할당

manager.sayName(); // 출력: Alice

함수 호출 시 this

자바스크립트에서 this는 함수가 호출되는 컨텍스트(실행 시점의 호출 방식, 런타)에 따라 결정됩니다.

즉 메서드를 호출하는 점 앞의 객체가 this의 값이 됩니다.

let person = { name: "Alice" };
let admin = { name: "Bob" };

function sayName() {
  console.log(this.name);
}

person.sayName = sayName;
admin.sayName = sayName;

person.sayName(); // 출력: Alice
admin.sayName();  // 출력: Bob

객체 없이 호출된 this

엄격 모드에서 this를 단독호출하면 undefined, 그렇지 않으면 전역 객체(window)를 참조합니다.

"user strict"

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

showThis(); // 출력: undefined (엄격 모드에서)

화살표 함수와 this

화살표 함수는 일반 함수와 달리 자신만의 this를 가지지 않습니다. 대신 화살표 함수 내의 this는 자신을 둘러싼 외부 렉시컬 환경에서 결정됩니다.

const user = {
  name: "Charlie",
  
  // 메서드 정의
  sayHello() {
    // 내부에 정의된 arrow 함수는 자신의 this가 없으므로,
    // 상위 함수인 sayHello()의 this, 즉 user를 그대로 사용합니다.
    const innerGreet = () => {
      console.log(`Hi, ${this.name}!`);
    };
    innerGreet();
  }
};

user.sayHello(); // 출력: Hi, Charlie!