メソッドとこれ

📢 22/03/13復習
📚 Reference
javascript.info, https://ko.javascript.info/object-methods
注意:これは個人がサイトで復習しやすいように再編成された文章です.
詳細については、リファレンスサイトにアクセスしてください.
作成方法
実際に存在するオブジェクト(エンティティ)(ユーザー、受注など)を表すと、オブジェクトが作成されます.

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

ユーザの現実生活における行為には、カートから物品を選択し、ログインし、ログアウトすることが含まれる.同様に、ユーザを表すオブジェクトuserは、特定の動作を実行してもよい.
JavaScriptでは、オブジェクトに関数を割り当てるプロセスによって、オブジェクトの動作の能力が与えられます.
相手userに挨拶する能力を与える.

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

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

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

関数式を使用して関数を作成し、オブジェクトProperty user.sayHiに関数を割り当てます.
オブジェクトに割り当てられた関数が呼び出されると、userが挨拶します.
オブジェクトプロパティに割り当てられた関数をメソッドと呼びます.
上記の例では、userに割り当てられたsayHiが方法である.
次の定義された関数を使用してメソッドを作成することもできます.

let user = {
  // ...
};

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

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

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

メソッド簡略化
オブジェクトテキストでメソッドを宣言するときに使用できるショートカット構文について説明します.

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

user = {
  sayHi() { // "sayHi: function()"과 동일합니다.
    alert("Hello");
  }
};

前述したように、functionを省略してドメインを定義することができる.
一般的な方法とショートカット構文を使用する方法は完全に同じではありません.オブジェクトの継承に関連するわずかな違いがありますが、今から見ればこれらの違いは重要ではないので、スキップしてみましょう.
メソッドとこれ
メソッドは、オブジェクトに格納された情報にアクセスしてこそ、その役割を果たすことができる.すべてのメソッドがそうではありませんが、ほとんどのメソッドではオブジェクト構成の値が使用されます.user.sayHi()の内部コードにおいて、オブジェクトuserに格納された名前を用いて挨拶文を作成することは、この場合に属する.
メソッド内部では、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をコピーして他の変数に割り当て、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を受け入れる場合、エラーは発生しません.
自由なthis
JavaScriptのthisは、他のプログラミング言語の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 (점과 대괄호는 동일하게 동작함)

ルールは簡単です.obj.f()が呼び出された場合、thisは、fが呼び出された期間のobjである.上記の例では、objは、userまたはadminを参照する.
🔥 オブジェクト呼び出しなし:this=undefined
オブジェクトがなくても、関数を呼び出すことができます.

function sayHi() {
  alert(this);
}

sayHi(); // undefined

厳格モードで上記コードが実行されると、thisはundefinedに割り当てられる.this.nameを介してnameにアクセスしようとすると、エラーが発生します.
厳密モードでない場合、thisはグローバルオブジェクトを参照します.ブラウザ環境では、windowという名前のグローバルオブジェクトを参照してください.
このようなコードは通常、不注意で作成されます.💥 関数本文でthisが使用されている場合、関数はオブジェクトコンテキストで呼び出されることが予想されます.
🔥 自由thisの結果
JavaScriptに他の言語を変換する開発者は、thisを混同しやすい.thisは、メソッド参照定義のオブジェクトを常に誤って認識する.この概念を「boundthis」と呼ぶ.
JavaScriptでは、thisがランタイムによって決定されます.方法がどこで定義されているかにかかわらず、thisは、「点の前」オブジェクトの「自由」に基づいて決定される.
このようにthisを運転時に決めると、メリットもデメリットもあります.1つの関数(メソッド)を作成するだけで複数のオブジェクトで再利用できますが、この柔軟性は予期せぬ事態を引き起こす可能性があります.
JavaScriptが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を使用する場合に便利です.