[JavaScript] method와 this

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

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

메서드 만들기

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

user.sayHi = function() {
  alert('HI!');
};

user.sayHi(); // HI!

함수 표현식으로 함수를 만들고, 객체 프로퍼티 user.sayHi에 함수를 할당해 주었다.
이제 객체에 할당된 함수를 호출하면 user가 인사를 해준다.
이렇게 객체 프로퍼티에 할당된 함수를 메서드(method) 라고 부른다
위의 예시에서는 user에 할당된 sayHi가 메서드이다.

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

let user = {
  //
}

function sayHi() {
  alert("hi!");
};

user.sayHi = sayHi;
user.sayHi(); // hi!

1) 메서드 단축 구문

단축 문법 소개

// 아래 두 객체는 동일하게 작동한다
user ={
  sayHi: function() {
    alert("Hello");
  }
};

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

일반적인 방법과 단축 구문을 사용한 방법이 완전히 동일하지는 않다.

메서드와 this

메서드는 객체에 저장된 정보에 접근 할 수 있어야 제 역할을 할 수 있다. 모든 메서드가 그런건 아니지만, 대부분의 메서드가 객체 프로퍼티의 값을 활용한다.
user.sayHi()의 내부 코드에서 객체 user에 저장된 이름을 이용해 인사말을 만드는 경우가 이런 경우이다.
메서드 내부에서 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;

admin.sayHi(); // 에러 발생

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

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

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

user.sayHi(); // 보라

자료 출처 : https://ko.javascript.info