JavaScript - 객체 메소드와 this

- 메소드(method)

• 객체 프로퍼티에 할당된 함수
• 객체에게 행동할 수 있는 능력

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

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

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

 

- 메소드 단축 구문

• function을 생략해도 메소드를 정의할 수 있음
  • 일반적인 방법과 단축 구문을 사용한 방법이 완전히 동일하진 않음(객체 상속과 관련된 미묘한 차이가 존재)

// 아래 두 객체는 동일하게 동작합니다.
user = {
  sayHi: function() {
    alert("Hello");
  }
};

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

 

- 메소드와 this

• 메소드 내부에서 this 키워드를 사용하면 객체에 접근 가능
• this는 메소드를 호출할 때 사용된 객체

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

  sayHi() {
    // 'this'는 '현재 객체'를 나타냅니다.
    alert(this.name);
  }

};

user.sayHi(); // John

 

- 자유로운 this

• 자바스크립트에서는 모든 함수에서 this를 사용할 수 있음
• this 값은 런타임에 결정됨
• 동일한 함수라도 다른 객체에서 호출했다면 this가 참조하는 값이 달라짐

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 별개의 객체에서 동일한 함수를 사용함
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

 

- 객체 없이 호출하기

• 객체가 없어도 함수 호출 가능
• 엄격 모드에서 실행하면 this에는 undefined가 할당
• 엄격 모드가 아닐 경우 this에는 전역 객체를 참조(브라우저 환경에서는 window)

function sayHi() {
  alert(this);
}

sayHi(); // undefined

 

- this가 없는 화살표 함수

• 화살표 함수는 일반 함수와는 달리 고유한 this를 가지지 않는다.
• 화살표 함수에서 this를 참조하면 화살표 함수가 아닌 외부 함수에서 this 값을 가져온다.

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

user.sayHi(); // 보라

 

- 요약

• 객체 프로퍼티에 저장된 함수 = 메소드
• 메소드는 this로 객체를 참조
• this 값은 런타임에 결정
  • 함수를 선언할 때 this를 사용할 수 있다. 다만, 함수가 호출되기 전까지 this엔 값이 할당되지 않는다.
  • 함수를 복사해 객체끼리 전달할 수 있다.
  • 함수를 객체 프로퍼티에 저장해 메소드 형태로 호출하면 this는 호출한 객체를 참조
    
    
• 화살표 함수는 자신만의 this를 가지지 않는다.
  • 화살표 함수 안에서 this를 사용하면 외부에서 this 값을 가져온다.
    
    

---

[ 참고자료 ]

https://ko.javascript.info/object-methods

메서드와 this