JavaScriptでこれを理解する

話題は以下の通りです

このキーワード

暗黙の拘束

ウインドウ結合

明示的なバインド(バインド、呼び出し、適用メソッド)

新しい拘束

矢の機能

のこれは

です

これはなぜ使用されますか？

このキーワードはJavaScriptで関数が呼び出されるコンテキストを設定するために使用されます.このキーワードは関数を呼び出すときに何を集中すべきかを決めます.
このキーワードの値は常に状況によって変化することができます.関数が呼び出されるまでは、関数パラメータの値がどのような関数であるかを知りません.

例を通して理解する

以下の例では、インドというオブジェクトの内部のメソッドが、このキーワードを使用して
メソッドが定義されているオブジェクトのプロパティ.この場合、メソッドが呼び出されるコンテキストはオブジェクトインドです.我々は、何の左側にあるかを見ることによって理解することができますメソッドを呼び出すとき.この種の束縛は暗黙の束縛と呼ばれます、そこで、このキーワードは'.'の左側にあるオブジェクトを参照しますメソッドを呼び出すとき.

const India = {
    name: "India",
    population: "1.2 billion",
    located: "South east Asia",

    info: function() {
       console.log(`${this.name} is a country with a population of 
       ${this.population} and is located in ${this.located}`);
    }
}

India.info();

オブジェクトをメソッドから取り出し、代わりに関数として使用するとどうなりますか?
何が起こると思いますか.

 const info = function () {
    console.log(`${this.name} is a country with a population of 
    ${this.population} and is located in ${this.located}`);
}
info();

ご覧のように、コンソール出力

未定義の国は未定義であり、未定義である.

今、私たちは、その関数が呼び出されているコンテクスト(シンクティックオブジェクト)が必要な変数を定義していないという事実により、上記の出力を得ます.つまり、任意のオブジェクトの外部では、このキーワードは、ノードを使用している場合、ブラウザとGlobalthisオブジェクトの場合はグローバルウィンドウオブジェクトを指します.js
ブラウザコンソールでこれを入力することで確認できます.

Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}

さて、これがグローバルウィンドウオブジェクトを参照していることを知っているので、
ウィンドウオブジェクト

window.name = "France",
window.population = "60.7 million",
window.located = "Western Europe"

info()

これでコンソール出力が表示されます

フランスは人口60.7万人の国で、西欧に位置しています.

グローバルオブジェクトまたはグローバルコンテキストにこれらの値を追加したので、変数の値にアクセスできます.
では、この振る舞いは何を意味するのでしょうか?単純に文脈を指定しないとき(フォーカスの対象とする)、このキーワードはグローバルオブジェクトを指すか、参照します.このオブジェクトはノードJSランタイムのためにGlobalthisと呼ばれていて、ブラウザのウインドウオブジェクトと呼ばれます.この動作はウィンドウ結合と呼ぶものです.
注意: strict modeではウィンドウのバインドを行い、同じようにしようとするとエラーが発生しません

 Uncaught TypeError: Cannot read properties of undefined 

厳密モードでは、設定されていないときの値はグローバルオブジェクトにデフォルトではなく、代わりに未定義に設定されます.

どのように我々の要件ごとにコンテキストを変更するには？

呼び出し、適用、バインドメソッドの明示的なバインド。

このメソッドを関数として抽出し、必要に応じてコンテキストを変更したい場合があります.
どうやってやるの?さて、JavaScriptのすべての関数は、これを行うには3つのメソッドを提供します.これらのメソッドを使用すると、異なるコンテキストで関数を呼び出し、異なるコンテキストを関数に適用したり、関数を別のコンテキストにバインドできます.
それらの各々を利用して、それらの使用の若干の違いを見させてください.

const Canada = {
    name: "Canada",
    population: "38 million",
    located: "North America"
}

const USA = {
    name: "USA",
    population: "302 million",
    located: "North America"
}

上記の2つのオブジェクトを定義しているカナダと米国.
カナダオブジェクトのコンテキストを使用して情報機能を呼び出します.

info.call(Canada);

呼び出しメソッドの上記の呼び出しは、コンソールにfollwingを印刷します

カナダは人口38万人の国で、北アメリカ　　に位置しています.

また、コンテキストとともに追加の引数を指定することもできます
以下の構文を使用します.

info.call(ContextObject, arg1, arg2, arg3); 

Applyは呼び出しと全く同じです、そして、あなたが配列として追加引数を通過しなければならないという事実では異なります.

info.apply(ContextObject, [arg1, arg2, arg3]) 

BINDメソッドはcallとapplyとは異なり、その機能という点で非常によく似ています.呼び出しとapplyとは異なり、bindはすぐにメソッドを呼び出しません.Bindはコンテキストにバインドされた新しい関数を返します.
下の有界関数の例を見ましょう

const boundedFunc = info.bind(USA);
boundedFunc();

上の例では、info関数をUSAオブジェクトにバインドし、boundedfuncという変数に格納します.boundedfuncを呼び出した場合、出力は
follows

米国は1億4200万の人口を持つ国で、北アメリカ　　に位置しています.

新しい結合

新しいバインドを使用すると、新しいキーワードを使用してコンストラクター関数を使用して新しいオブジェクトを作成します.迅速にプロセスを理解するための例を見てみましょう.

const Country = function(name, population, location) {
  this.name = name;
  this.population = population;
  this.location = location;
}

const switzerland = new Country("Switzerland", "8.6 million", "Western Europe");

新しいキーワードを使用して上記のコンストラクター関数を呼び出すと、この関数は新しいオブジェクトを作成し、指定したプロパティを追加してオブジェクトを返します.このプロセスはnew bindingと呼ばれ、コンストラクタ関数内のこのキーワードは、関数が作成したオブジェクトを指します.

これは矢印関数

矢印関数は、この関数のキーワードを持っていません.また、この関数の値は、この関数の値が作成されたときの関数の字句コンテキストにどのようなものに依存します.
ブラウザコンソールで次のように入力して例を挙げましょう

const Poland = {
    name: "Poland",
    population: "30.8 million",
    located: "Eastern europe",



    infoArrow: () => {
      console.log("this: ", this);
    },

    info: function() {
        return (() => this);

    }
}

infoArrow関数では、このキーワードはウィンドウオブジェクトを指します.なぜなら、この関数は、関数の生成した語彙コンテキストに依存します.
infoArrow関数を呼び出すと以下のようになります
コンソールで

this:  Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}

さあ、通常の機能を試してみましょう.ここでの値は、前述したように通常通り決定することができる.通常の関数は、この関数の値を返す矢印関数を返します.矢印関数によって返される値は、語彙のコンテキストに基づいてどのように異なるかを見てみましょう.

症例1

メソッドinfo ()を呼び出し、返り値を変数arrowfnに格納します.この変数は矢印関数(()>>を含んでいます).矢印の中に注意してください
関数getが作成され、その字句コンテキスト内の値がポーランドオブジェクトであるため、この矢印関数を実行すると、この値をポーランドオブジェクトとして取得します.

let ArrowFn = Poland.info();
console.log("Value of this: ", ArrowFn());

上記のコードを出力します.

Value of this:  {name: 'Poland', population: '30.8 million', located: 'Eastern europe', infoArrow: ƒ, info: ƒ}

症例2

では、変数fnの情報を参照してください.fnは、info ()メソッドからなる変数です.私たちは実効的にinit ()メソッドをポーランドオブジェクトから取り出し、変数fnに関数として格納しています.

let fn = Poland.info;

fn ()を呼び出し、返り値(矢印関数である)を変数arrown 2に格納してみましょう.現在、矢印関数を呼び出すと、グローバルウィンドウオブジェクトが返されます.なぜなら、矢印の関数が作成されたとき(fnを呼び出して)ウィンドウのバインディングによって、このオブジェクトはウィンドウオブジェクトを参照することになります.

let ArrowFn2 = fn();
console.log("value of this: ", ArrowFn2());

Console o/p
value of this:  Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}

注意- bind関数、callおよびapplyを使用して矢印関数のコンテキストを明示的に設定することはできません.これらの矢印関数の動作の別の結果は、コンストラクタ関数として使用できないことです.
そして、これはJavaScriptのすべてについてです.