JavaScriptメソッドとthis

オブジェクトは、実際に存在するオブジェクト(エンティティ)を表示しようとしたときに生成されます.

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

作成方法

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

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

user.sayHi(); // HI!

関数式で関数を作成し、オブジェクトproperty user.sayHiに関数を割り当てます.
これで、オブジェクトに割り当てられた関数を呼び出すと、ユーザーが挨拶します.
このようにオブジェクトpropertyに割り当てられる関数をメソッド(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");
  }
};

一般的な方法とショートカット構文を使用する方法は完全に同じではありません.

メソッドとこれ

メソッドは、オブジェクトに格納された情報にアクセスできる必要があります.すべてのメソッドがそうではないが、ほとんどのメソッドはオブジェクトpropertyの値を利用している.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

JavaScriptでは、すべての関数に対して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