[JAVASCRIPT.INFO] 4.4 메서드와 this

4.4 메서드와 this

자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여한다.

메서드 만들기

let user = {
  name: "John",
  age: 30,
}
user.sayHi = function(){
  alert("안녕하세요!");
}
user.sayHi();    // 안녕하세요!

객체 리터럴 안에 메서드를 선언할 때 사용할 수 있는 단축 문법

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

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

메서드와 this

메서드는 객체 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있다.

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

let user = {
  name: "John",
  age: 30,
  sayHi() {
    alert(this.name);        // 'this'는 '현재 객체'를 나타낸다.
  }
}

user.name과 같이 외부 변수를 참조해 객체에 접근할 수 있다. 그러나 이렇게 외부 변수를 사용해 객체를 참조하면 에러가 발생할 수 있다. (user를 복사해 다른 변수에 할당하고, user는 전혀 다른 값으로 덮어썼을 경우, sayHi()는 정상적으로 작동하지 않을 수 있다.)

자유로운 this

• 자바스크립트에선 모든 함수에 this를 사용할 수 있다.
• this값은 런타임에 결정된다. 컨텍스트에 따라 달라짐 (동일한 함수라도 다른 객체에서 호출했다면 'this'가 참조하는 값은 달라짐)obj.f()를 호출했다면, this는 f를 호출하는 동안의 obj이다. 위 예시에선 obj가 user나 admin을 참조할 것이다.
• 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)
• 객체가 없는 경우, 엄격모드가 아닐 때 this는 전역 객체를 참조한다. 브라우저 환경에선 window라는 전역 객체를 참조함
  엄격모드에선 this엔 undefined가 할당된다.
• 자바스크립트에서 this는 런타임에 결정되기 때문에 메서드가 어디서 정의되었는지에 상관없이 this는 '점 앞의' 객체가 무엇인가에 따라 '자유롭게' 결정된다.

this가 없는 화살표 함수

• 화살표 함수는 '고유한' this를 가지지 않는다. 화살표 함수에서 this를 참조하면, 화살표 함수가 아닌 '평범한' 외부 함수에서 this 값을 가져온다.별개의 this가 만들어지는 건 원하지 않고, 외부 컨텍스트에 있는 this를 이용하고 싶은 경우 화살표 함수가 유용하다.
• let user = { firstName: "보리", sayHi() { let arrow = () => alert(this.firstName); arrow(); } } user.sayHi(); // 보리