자바스크립트 - 객체의 메서드와 this

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("안녕하세요!");
};

user.sayHi(); // 안녕하세요!



// 함수 선언
function sayHi() {
  alert("안녕하세요!");
};

// 선언된 함수를 메서드로 등록
user.sayHi = sayHi;

객체는 메서드를 함수 만들듯이 생성할 수 있으며 . 연산자를 통해 사용할 수 있습니다.

함수를 생성 후 메서드로 등록해서 사용할 수도 있습니다.

 

객체 리터럴 안에 메서드를 생성할 경우 단축할 수 있으며 객체 상속에 따라 조금 차이가 존재합니다.

// 아래 두 객체는 동일하게 동작

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// 단축 구문
user = {
  sayHi() { // "sayHi: function()"과 동일합니다.
    alert("Hello");
  }
};

 

this

메서드 내부에서 객체에 접근은 this 키워드를 사용하여 접근할 수 있습니다.

this가 아닌 객체이름을 통해 접근할 수도 있지만 객체가 변할 경우 문제가 발생할 수도 있습니다.

자바스크립트에서는 this는 모든 함수에 사용할 수 이있으며 런타임에 결정이 됩니다. 유연하게 사용할 수 잇지만 조심해서 사용해야합니다.

 

화살표 함수에서 this는 화살표 함수가 아닌 외부 함수에서 this의 값을 가져옵니다.

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // 보라

여기서는 arrow가 아닌 외부 sayHi의 this가 됩니다.