[코어 JS] 4.4 - 객체: 메서드와 this

4.4 메서드와 this

객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성

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

 

- 메서드 만들기

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

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

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

//객체 프로퍼티에 할당된 함수 = 메서드(method)
//메서드 : user.sayHi();

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

 

+ 객체 지향 프로그래밍(object-oriented programming, OOP) _ 객체를 사용하여 개체를 표현하는 방식

 

- 메서드 단축 구문

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

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를 사용하지 않고 외부 변수를 참조해 객체에 접근 가능

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
    alert( this.name ); // Error없음             
  }

};


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

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

 

-자유로운 this

JS에서는 모든 함수에 this 사용가능

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

this 값은 런타임에 결정, 컨텍스트에 따라 달라짐
동일한 함수라도 다른 객체에서 호출한다면 'this'가 참조하는 값이 달라짐

_ obj.f()를 호출했다면 this는 f를 호출하는 동안의 obj

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

function sayHi() {
  alert(this);
}

sayHi(); // 엄격모드에서는 undefined 할당
sayHi(); // 엄격모드가 아닐 때는 전역 객체를 참조

 

+ 자유로운 this가 만드는 결과

JS에서 this는 런타임에 결정되므로 메서드가 어디에서 정의되었는지와 무관하게 '점 앞'의 객체가 무엇인가에 따라 결정, 함수(메서드)를 하나만 만들어 여러 객체에서 재사용할 수 있다는 장점과 실수가 발생할 가능성이 있는 단점이 공존

 

- this가 없는 화살표 함수

'고유한' this를 가지지 않는 화살표 함수에서는 this를 참조할 경우 '평범한' 외부 함수에서 this값을 호출

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

user.sayHi(); // 보라

_별도의 this가 만들어지지 않고 외부 컨텍스트에 있는 this를 이용하고 싶을 때는 화살표 함수가 유용

 

요약

- 객체 프로퍼티에 저장된 함수를 '메서드'라 부름

- object.doSomthing()은 객체를 '행동'할 수 있게 함

- 메서드는 this로 객체를 참조함

this 값은 런타임에 결정

- 함수를 선언할 떄 this를 사용 가능, 함수가 호출되기 전까지는 this에 값이 할당되지 않음

- 함수를 복사해 객체간 전달 가능

- 함수를 객체 프로퍼티에 저장해 object.method()처럼 '메서드'형태로 호출시 this는 object를 참조

화살표 함수는 자신만의 this를 가지지않으므로 화살표함수 내에서 this를 사용할 경우 외부에서 this 값 호출

 

과제