JavaScript this?!


this?


JavaScriptでは、これは何を意味しますか?
これはオブジェクトと深い関連があります.たとえば、letinfo={name:[eunjiang]}というオブジェクトがあります.呼び出しnameは「eunjiang」を出力し、変数infoはこのコンテキストオブジェクトと呼ばれます.
コンテキストという言葉は、表示される任意のオブジェクトとして理解できます.

この4つの操作方法


1.デフォルトバインド(グローバルオブジェクト)


Chrome Developerツールのコンソールにthisを入力して簡単なテストを行います.

Windowオブジェクトが正常に出力されているかどうかを確認できます.つまり、この操作の最初の方法は、グローバルオブジェクト(ウィンドウ)をコンテキストオブジェクトとして使用することです.
グローバル範囲内で変数を宣言するなど、コンテキストとしてグローバルオブジェクトを持つオブジェクトにPropertyを登録します.したがって、thisを使用すると明確でない場合、グローバルステータスに影響を及ぼす可能性があります.

2.暗黙的バインド


暗黙的なバインドをコードで表す場合は、次のようになります.
function test() {
  console.log(this.a);
}

var obj = {
  a: 20,
  func1: test,
  func2: function() {
    console.log(this.a);
  }
};

obj.func1(); // 20
obj.func2(); // 20
すなわち、関数がオブジェクトを介して呼び出されると、そのオブジェクトはそのオブジェクトのコンテキストオブジェクトになります.上記のコードでは、func 1およびfunc 2はobjによって呼び出されるため、objはthisである.

3.明示的なバインド


関数にはcall、apply、bindメソッドがあり、最初のパラメータに渡されると、明示的なバインドと呼ばれるコンテキストオブジェクトになります.
function test() {
  console.log(this);
}

var obj = { name: "eunjeong" };
test.call(obj); // { name: 'eunjeong' }
test.call("원시 네이티브 자료들은 wrapping 됩니다");

4.新規バインド


新しいバインドはクラス設計モードの形式を表示します.
function test(a) {
  this.a = a;
  this.b = 20;
}

var check = new test(2);
console.log(check.a); // 2
console.log(check.b); // 20
上のコードはJavaScriptにクラスがあるように見えます.ただし、newバインドの動作順序を表示します.

  • 新規オブジェクトの作成

  • 新しいオブジェクトのプロトタイプチェーンと呼び出し関数のプロトタイプ関連付け

  • 関数は、このコンテキストオブジェクトとして1番の魚オブジェクトを使用して実行されます.

  • 1で作成したオブジェクトを返します
  • すなわち,newオブジェクトの実行は関数の実行と変わらない.また、返されるオブジェクトは、私たちが想像していたクラスモードとは異なります.これはjsにおけるnewキーワードの動作がクラスのインスタンス化と類似しているためである.

    4つのバインドの優先度


    新しいバインディング>=明示的バインディング>>>>>暗黙的バインディング>=デフォルトバインディング.

    関数のこれ?


    これらのバインドについて説明しましたが、さらに理解する必要があります.
    特別な動作だ下記のブログを参考にしてください.
    Javascript Function, Arrow Function
    リファレンス
    JAvascript thisの4つの操作方法