このバインディング

これは何ですか.
これは、通常、オブジェクト向けプログラミング言語で使用される予約語です.オブジェクト内部の変数または関数を参照するには、オブジェクト内部で自分の属するオブジェクトを参照できる必要があるため、この予約語は必須です.
JavaScriptは、関数呼び出しの仕方によって、オブジェクト参照の内容を変更します.

一般関数

ジェネレータ関数

方法

オブジェクトテキストの自己参照
オブジェクトテキストは関数によって作成されません.したがって、thisバインドではなく、内部で自分の識別子を呼び出すことで自己参照を行うことができます.

const circle = {
 radius : 5,
  getDiameter(){
   return 2 * circle.radius;
  }
}

以上のように、オブジェクト文字は、自分の識別子を呼び出すことで自分のプログラムを参照することができる.
ただし、関数ではインスタンスを作成する前に識別子を参照できないため、別の予約語で自己参照する必要があります.これがこれです.
コンストラクション関数でこのアイテムをバインドする
コンストラクション関数は、インスタンスを生成する関数です.

function Circle (){
 radius : 5
}
Circle.prototype.getDiameter() = function () {
 return 2 * this.radius;
}

thisがない場合、上記のコードで関数を構築する方法は自己参照できません.バインドは呼び出し時に動的に発生するため、インスタンス化する前にバインドされません.上のコードはインスタンス化する前にバインドするインスタンスが見つからないためです.したがって、この呼び出しで作成したインスタンスにバインドする方法を選択します.
コンストラクション関数では、このバインドは作成したインスタンスとともに発生します.
上のコード

function Circle (){
 radius : 5
}
Circle.prototype.getDiameter() = function () {
 return 2 * this.radius;
}
const circle = new Circle(5);

ループインスタンスを作成すると、コンストラクション関数のthisがループインスタンスにバインドされ、そのインスタンスを指します.これにより、インスタンス内部メソッドはオブジェクト内部プロシージャにアクセスできます.
一般関数でこのアイテムをバインドする
一般的な関数では、このバインドはグローバルオブジェクトと発生します.一般的な関数は、特定のオブジェクトを作成する関数ではありません.インスタンスは作成されず、バインドするオブジェクトもないため、最上位オブジェクトのグローバルオブジェクトにバインドされます.一般関数のこのバインドは理想的なバインドではありません.したがってstrictmodeでは、通常の関数では未定義および未定義のバインドが発生します.

function circle (){
  var radius = 5;
  console.log(this); // window
 return this.radius;
}

上のコードは5に戻りません.考えを間違えると、thisが関数を指していると勘違いしやすく、関数のradiusを返します.
ただし、一般関数のthisはグローバルオブジェクトにバインドされ、定義されていないものを返します.
メソッドでこのアイテムをバインド
オブジェクト内部のメソッドが呼び出されることがあります.

const circle = {
 radius : 5,
  getDiameter () {
   return this.radius; 
  }
}
circle.getDiameter(); // 5가 리턴

これは、オブジェクト向けプログラミング言語で使用される一般的なthisバインド方式です.自分が属するオブジェクトの参照値をここにバインドして、オブジェクト内部のPropertyを参照します.したがって、メソッドを呼び出すオブジェクトが参照されます.
この項目を人為的にバインドする(apply、call、bind)
JavaScriptのさまざまな関数モードを使用する場合、このバインドは私が予想したほどではない場合があります.この場合、thisに直接バインドできるはずです.
この機能がFunctionですprototype(すなわち関数構築オブジェクトのプロトタイプ)はapply,call,bind法を実現した.
apply, call
applyメソッドとcallメソッドの本質的な機能は呼び出し関数である.この手順では、バインドを変更できます.

function getBinding(a, b){
 return this; 
}
const thisArg = {a:1};
getThisBinding.apply(thisArg, [a, b]);
getThisBinding.call(thisArg, a, b);

両者は、関数内部でこれを引数として受信したオブジェクトにバインドする機能と同じです.ただし、関数にパラメータがある場合は、配列を使用してパラメータを渡すか、パラメータを解放するかで差があります.上記の例では、getBinding関数のthisは、グローバルオブジェクトではなくthis Argオブジェクトにバインドされます.
bind
bindもapplyやcallと同様にバインドに使用されます.しかしapplyとcallメソッドは関数を呼び出すと言います.bindは関数を呼び出さない.したがって、関数自体をバインドして渡す必要がある場合に便利です.特にコールバック関数、非同期処理の場合.

const person = {
 name: "Lee",
  foo(callback){
   setTimeout(callback, 1000); 
  }
}

person.foo(function() {
  console.log(`hello ${this.name}`);
}}

上記の例ではfooメソッドを呼び出し、コールバック関数をパラメータとして渡します.コールバック関数の特徴は,高次関数が関数呼び出しの時点を決定できることである.したがって、上記の関数がthisバインドを単独で行わない場合、コールバック関数のthisはグローバルオブジェクトを指します.これもsettimeout関数の特徴であり、JavaScriptは基本的に単一スレッド言語である.したがって、コードは順番に実行され、停止しません.settimeoutは、1秒後にコールバック関数を実行する必要があります.この関数を呼び出すと、JavaScriptはコールバック関数をイベントループに渡し、すべてのコードを実行します.これにより、1秒後にすべての実行コンテキストが終了し、グローバルオブジェクトのみが残ります.これにより、コールバック関数が実行されると、指定する親オブジェクトのグローバルオブジェクトのみが保持され、そのグローバルオブジェクトにバインドされます.

const person = {
 name: "Lee",
  foo(callback){
   setTimeout(callback.bind(this), 1000); 
  }
}

person.foo(function() {
  console.log(`hello ${this.name}`);
}}

したがって、上記の例のように、コールバック関数に現在のオブジェクトをバインドすることで、現在のコールバック関数の実行時に参照するオブジェクトを保持する必要があります.
このバインドの例

function objFunction() {
  console.log('Inside `objFunction`:', this.foo); // 13
  return {
    foo: 25,
    bar: function() {
      console.log('Inside `bar`:', this.foo); // 25
    },
  };
}
objFunction.call({foo: 13}).bar();

このバインドは精神崩壊の例である.まず、objFunctionは通常の関数として呼び出されるが、callバインドのため、最上位コードのthisは伝達パラメータ{foo:13}にバインドされる.次に、関数はオブジェクトを返します.この戻りオブジェクトのbar()メソッドが呼び出されます.これは呼び出しメソッドであるため、このメソッドのthisはオブジェクトを指します.だから出力25.
これは極端な例ですが、1つの関数では、javascriptに慣れていないと、思考が破壊されます.