자바 스크립트 메서드와 'this'

메서드 만들기

 

객체 user에게 인사할 수 있는 능력을 부여해 준다.

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

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

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

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

객체에 할당된 함수를 호출하면 user가 인사를 해준다.

이렇게 객체 프로퍼티에 할당된 함수를 메서드 라고 부른다.

 

메서드는 아래와 같이 이미 정의된 함수를 이용해서 만들수도 있다.

let user = {
  // ...
};

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

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

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

 

메서드 단축 구문

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

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

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'를 이용함
  }

};

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

user를 복사해 다른 변수에 할당 (admin = user)하고 user는 전혀 다른 값으로 덮어썻다고 가정하면 sayHi()는 원치않는 값(null)을 참조할 것이다.

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가 참조하는 값이 달라진다.

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는 항상 메서드가 정의된 객체를 참조할 것이라고 착각한다. 이런 개념을 'bound this'라고 한다.

 

자바스크립트에서 this는 런타임에 결정된다. 메서드가 어디서 정의되었는지에 상관없이 this는 '점 앞의' 객체가 무엇인가에 따라 '자유롭게' 결정된다.

 

이렇게 this가 런타임에 결정되면 좋은 점도 있고 나쁜 점도 있다. 함수(메서드)를 하나만 만들어 여러 객체에서 재사용할 수 있다는 것은 장점이지만, 이런 유연함이 실수로 이어질 수 있다는 것은 단점이다.

 

 

'this' 가 없는 화살표 함수

화살표 함수는 일반 함수와는 달리 '고유한' this를 가지지 않는다. 

화살표 함수에서 this를 참조하면 화살표 함수가 아닌 평범한 외부 함수에서this 값을 가져온다.

 

아래 예시에서 함수 arrow()의 this는 외부함수 user.sayHi()의 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값을 가져온다.

 

출처 : ko.javascript.info/object-methods