JavaScript 4.4

메서드와 this

• 객체는 실제 존재하는 개체(entity)를 표현하고자 할 때 생성된다.

메서드 만들기

• 함수 표현식으로 함수를 만들고, 객체 프로퍼티 user.sayHi에 함수를 할당해준다.

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

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

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

• 이렇게 객체 프로퍼티에 할당된 함수를 메서드라고 부른다.
  • 예시에서는 sayHi가 메서드이다.
• 메서드는 이미 정의된 함수를 이용해서 만들수도 있다.

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

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

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

  sayHi() {
    alert(user.name); // 'this' 대신 'user'를 이용함
  }

};

• 외부 변수를 사용해 객체를 참조하면 예상치 못한 에러가 발생할 수 있다.

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를 사용할 수 있다.

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 값을 가져온다.

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

user.sayHi(); // 보라