11 JS 메서드와 this

메서드

 - 객체는 실제 존재하는 개체를 표현할 때 생성하는 것으로 사용자에게 특정한 행동을 할 수 있게 하는 것입니다.

 

  객체 프로퍼티에 할당된 함수를 메서드(method) 라고 부릅니다. 메서드는 아래와 같이 이미 정의된 함수를 이용해서 만들 수도 있습니다.

let user = {
  // ...
};

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

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

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

user.sayHi()가 실행되는 동안에 this는 user를 나타냅니다.

this를 사용하지 않고 외부 변수를 참조해 객체에 접근하는 것도 가능합니다.

 

자유로운 this

 - JS의 this는 다흔 프로그래밍 언어의 this와 동작 방식이 다릅니다. 자바스크립트에선 모든 함수에 this를 사용할 수 있습니다.

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

  위와 같이 사용하여도 에러가 발생하지 않습니다. 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가 없는 화살표 함수

 - 화살표 함수는 일반 함수와는 달리 ‘고유한’ this를 가지지 않습니다. 화살표 함수에서 this를 참조하면, 화살표 함수가 아닌 ‘평범한’ 외부 함수에서 this 값을 가져옵니다.

아래 예시에서 함수 arrow()의 this는 외부 함수 user.sayHi()의 this가 됩니다.

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

user.sayHi(); // 보라