[모던 JavaScript] 4.4 메서드와 this

메서드 만들기

- 객체 user에게 인사할 수 있는 능력을 부여해 줌

- 객체 프로퍼티에 할당된 함수를 메서드라고 부름

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

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

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

 

 

 

메서드 단축 구문

// 아래 두 객체는 동일하게 동작합니다.

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

// 단축 구문을 사용하니 더 깔끔해 보이네요.
user = {
  sayHi() { // "sayHi: function()"과 동일합니다.
    alert("Hello");
  }
};

 

 

 

메서드와 this

- 대부분의 메서드는 객체 프로퍼티의 값을 활용함

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

- '점 앞'의 this는 객체를 나타냄

- this 값은 런타임에 결정됨

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

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

};

user.sayHi(); // John

 

- this.name이 아닌 user.name으로도 객체에 접근가능하지만 아래와 같은 에러가 발생할 수도 있음

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

  sayHi() {
    alert( user.name ); // Error: Cannot read property 'name' of null
  }

};


let admin = user;
user = null; // user를 null로 덮어씁니다.

admin.sayHi(); // sayHi()가 엉뚱한 객체를 참고하면서 에러가 발생했습니다.

 

 

 

자유로운 this

- 자바스크립트의 this는 다른 프로그래밍 언어의 this와 동작 방식이 다름

- 자바스크립트에선 모든 함수에 this를 사용할 수 있음

 

 

 

this가 없는 화살표 함수

- 화살표 함수는 this를 가지지 않음

- 화살표 함수에서 this를 참조하면, 화살표 함수가 아닌 '평범한' 외부 함수에서 this 값을 가져옴

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

user.sayHi(); // 보라