자바스크립트 메서드와 this

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

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

그리고 현실 세계에서 사용자는 장바구니에서 무엇인가 선택, 로그인, 로그아웃 등의 행동을 할 수 있습니다.

동작은 속성의 함수로 JavaScript에서 표현됩니다.

 

방법 예:

user 먼저 인사하는 법을 가르쳐 봅시다.

 

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

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

user.sayHi();	// Hello!

여기에서 함수 표현식을 사용하여 함수를 만들고 user.sayHi 객체의 속성에 할당했습니다.

그러면 우리는 그것을 메서드라고 부를 수 있습니다. user.sayHi() 이제 사용자가 말할 수 있습니다!

객체의 속성인 함수를 메서드라고 합니다.

그래서 여기 sayHi 에 객체의 메서드 user 가 있습니다.

물론 다음과 같이 미리 선언된 함수를 메서드로 사용할 수 있습니다.

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi();	// Hello!

객체 지향 프로그래밍
객객체를 사용하여 코드를 작성할 때 객체 지향 프로그래밍이라고 하며 간단히 "OOP"입니다.
OOP는 그 자체로 흥미로운 과학입니다. 올바른 엔티티를 선택하는 방법은 무엇입니까? 그들 사이의 상호 작용을 구성하는 방법은 무엇입니까? 그것은 아키텍처이며 E. Gamma, R,Helm, R.Johnson, J.Vissides의 "Desing Patterns: Elements of Reusable Object-Oriented Software" 또는 "Object-Oriented Analysis and Design With 응용 프로그램", G. Booch 등.

메서드 속기

객체 리터럴의 메서드에 대한 더 짧은 구문이 있습니다.

// these objects do the same

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

// method shorthand looks better, right?
user = {
  sayHi() {	// same as "sayHi: function() {...}"
    alert("Hello");
};

설명된 대로 생략 "function" 하고 그냥 sayHI() 를 쓸 수 있습니다.

사실을 말하자면, 표기법은 완전히 동일하지 않습니다. 객체 상속(나중에 다룰 내용)과 관련된 미묘한 차이점이 있지만 지금은 중요하지 않습니다. 거의 모든 경우데 더 짧은 구문이 선호됩니다.

메소드의 "this"

메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역활을 할 수 있습니다. 모든 메서드가 그런 건 아니지만, 대부분의 메서드가 객체 프로퍼티의 값을 활용합니다.

 

user.sayHi() 의 내부 코드에서 객채 user에 저장된 이름(name)을 이용해 인사말을 만드는 경우가 이런 경우 속합니다.

메서드 내부에서 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()가 엉뚱한 객체를 참고하면서 에러가 발생했습니다.

alert 함수가 user.name 대신 this.name 을 인수로 받았다면 에러가 발생하지 않았을 겁니다.