オブジェクトは、実際に存在するオブジェクト(エンティティ)を表示しようとしたときに生成されます.
したがって、オブジェクトが特定の動作を実行できるようにします.
オブジェクトには特定の[動作](Behavior)もあります.
JavaScriptでは、関数をオブジェクトに割り当てるプロパティで、オブジェクトの動作の能力を与えます.

作成方法

相手userに挨拶する能力を与える.

let user = {
  name: "Lee",
  age: 23
};

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

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

関数式で関数を作成し、オブジェクトproperty user.sayHiに関数を割り当てます.
オブジェクトに割り当てられた関数を呼び出すと、userが挨拶します.👋🏻
このようにオブジェクトpropertyに割り当てられる関数をメソッド(method)と呼ぶ.
メソッドは、次の定義された関数を使用して作成することもできます.

let user = {
  // ...
};

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

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

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

💡 オブジェクト向けプログラミング

オブジェクトを使用してオブジェクトを表現する方法.
OOP自体が学術分野を構築する重要なテーマである.正しいオブジェクトを選択する方法,オブジェクト間のインタラクションを表す方法などの決定は,オブジェクト向けに設計されている.

オブジェクト向けプログラミング推奨書

Eric Gamma,“GoFの設計モード”

Gradi Booch、「UMLを使用したオブジェクト指向解析設計」

メソッド簡略化

オブジェクトテキストにメソッドを宣言するためのショートカット構文があります.

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

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

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

上記コードに示すように、functionを省略して方法を定義することができる.
一般的な方法とショートカット構文を使用する方法はまったく同じではありません.対象継承に関する微妙な違いは、今のところこれで終わりです.

メソッドとこれ

ほとんどのメソッドでは、オブジェクトプロパティの値が使用されます.
メソッドは、オブジェクトに格納された情報にアクセスできる必要があります.
上記コードにおいて、user.sayHi()の内部コードにおいて、オブジェクトuserに格納されている名称を用いて挨拶文を作成する場合に該当する.
メソッド内でこのキーワードを使用してオブジェクトにアクセスします.
ここで、thisは、メソッドを呼び出す際に使用されるオブジェクトを表す.
EX.

let user = {
  name: "Lee",
  age: 23,

  sayHi() {
    // 'this'는 '현재 객체'를 나타낸다.
    alert(this.name);
  }

};

user.sayHi(); // Lee

user.sayHi()運転中、thisはuserを表す.thisを使用しなくても、外部変数を参照してオブジェクトにアクセスできます.

let user = {
  name: "Lee",
  age: 23,

  sayHi() {
    alert(user.name); // 'this' 대신 'user'를 이용
  }
};

ただし、外部変数を使用してオブジェクトを参照すると、予期せぬエラーが発生する可能性があります。

userが複製され、他の変数(admin = user)に割り当てられ、userが全く異なる値で上書きされる場合、sayHi()は望ましくない値(null)を参照する.
EX.

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

  sayHi() {
    alert( user.name ); // Error: Cannot read property 'name' of null
  }

};


let admin = user;
user = null; 

admin.sayHi(); // sayHi()가 엉뚱한 객체를 참고하면서 에러 발생

alert関数がuser.nameではなくthis.nameを受け入れる場合、エラーは発生しません.

自由なthis

JAvascriptのthisは、他のプログラミング言語のthisと動作が異なる.
JavaScriptでは、すべての関数でthisを使用できます.thisの値はコンテキストに依存するため、実行時に決定される.メソッドがどこで定義されているかにかかわらず、thisは「点の前」のオブジェクトが何であるかに基づいて「自由」に決定されます.
これにより、thisが実行時に決定され、1つの関数(メソッド)を作成するだけで複数のオブジェクトで再利用できるという利点があるが、この柔軟性がエラーを引き起こす可能性があるという欠点がある.そのため、開発者は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=undefined

オブジェクトがなくても関数を呼び出すことができます.厳格モードで上記コードが実行されると、thisはundefinedを割り当てる.したがって、this.nameでnameにアクセスしようとすると、当然エラーが発生します.

厳密なパターンでなければ

thisグローバルオブジェクトを参照します.ブラウザ環境では、windowという名前のグローバルオブジェクトが参照されます.このような動作の違いも厳格なパターンを導入した背景にある.
❗この形式のコードは通常誤って作成されます.関数本文でthisが使用されている場合、関数はオブジェクトコンテキストで呼び出されると考えられます.

thisの矢印関数がありません

矢印関数には、通常の関数とは異なり、「固有」thisはありません.
矢印関数でthisを参照すると、thisの値は矢印関数ではなく「一般」外部関数から取得されます.
以下の例で説明します.
EX.

let user = {
  firstName: "나나이유",
  sayHi() {
    let arrow = () => alert(this.firstName); 
    // 함수 arrow()의 this는 외부 함수 user.sayHi()의 this
    arrow();
  }
};

user.sayHi(); // 나나이유

外部コンテキストのthisを使用する場合は、矢印関数は、個別のthisを作成するよりも便利です.
この文章はhttps://ko.javascript.info/を参考にして書かれた.