JavaScriptにおけるthisの原理と6つのよくある使用シーンの詳細

一、thisの原理
thisはJavaScriptのキーワードで、関数が呼び出された時に現れます。
関数は一定の環境で動作しますので、関数を呼び出す時は必ず「誰が呼び出したのか」を知る必要があります。thisを使って指し示します。
では、thisはいったい何を指していますか？
thisは関数自体を指すのではなく、関数の動作領域を指すのではなく、関数を呼び出した時のオブジェクトです。
二、使用シーン
（一）一般関数の呼び出しは、thisがWindowを指しています。

var name = '  ';
function cat(){
  var name = '  ';
  console.log(this.name);//  
  console.log(this);//Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
}
cat();

ここで質問があるかもしれませんが、thisは関数を呼び出す対象を指しているのではないですか？cat（）は対象が現れていません。これは全体的な作用領域の中で、windowはルートディレクトリです。一般的には省略できます。例えば、alert（）はwindow.alert（）です。
（二）対象の方法、thisとは、当該オブジェクトのことです。
1、ドメインチェーンを一層作用させる場合、thisは当該オブジェクトを指す。

var name = '  ';
var cat = {
  name:'  ',
  eat:function(){
    console.log(this.name);//  
  }
}
cat.eat();

関数eatはcatの対象で呼び出されるので、thisはcat自体を指すので、cat.name=魚があります。
2、多重層がドメインチェーンを作用する時、thisは方法の一番近い層の対象を指します。

var name = '  ';
var cat = {
  name:'  ',
  eat1:{
    name:'  ',
    eat2:function(){
      console.log(this.name);//  
    }
  }
}
cat.eat1.eat2();

eat 2方法は2つの対象cat、eat 1に含まれていますが、隣接しているeat 1の対象となりますので、this.nameとは、eat 1の属性nameのことです。すなわち「毎年」です。
ここで注意したいのですが、もしcat.eat 1.eat 2という結果が変数eat 3に与えられたら、eat 3()の値はいくらですか？

var eat3 = cat.eat1.eat2;
eat3(); //   

答えは「カカ」です。これは赋価操作を経て、関数の呼び出しを発起していません。eat 3（）これは本物の呼び出しです。これを発起したのはルートオブジェクトwindowです。だから、thisとはwindow、this.name=カカです。

（三）コンストラクタの呼び出しは、thisとは、実用化された新しいオブジェクトのことです。

var name = '  ';
function Cat(){
  this.name = '  ';
  this.type = '    ';
}
var cat1 = new Cat();
console.log(cat1);//        Cat {name: "  ", type: "    "}
console.log(cat1.name);//   

（四）applyとcall呼び出し時、thisはパラメータ中のオブジェクトを指します。

var name = '  ';
function eat(){
  console.log(this.name);
}
var cat = {
  name:'  ',
}
var dog = {
  name:'  ',
}

eat.call(cat);//   
eat.call(dog);//   

apply方法とcall方法は、明示的な修正プロトタイプの原型に相当します。

（五）匿名関数呼び出しは、グローバルオブジェクトを指します。

var name = '  ';
var cat = {
  name:'  ',
  eat:(function(){
    console.log(this.name);//  
  })()
}
cat.eat;

ここで匿名関数の呼び出し方法を紹介します。一般的な方法は3つあります。

//①  ()   ,       (  ) 
(function(data){
  console.log(data);
})("222");

//②    (  ),   ()   
(function(data){
  console.log(data);
}("333"));

//③      ，    !
!function(data){
  console.log(data);
}("444");

（六）タイマーで呼び出し、グローバル変数を指します。
一般的なタイマーはset Intervalとset Timeoutがあり、set Intervalを例に挙げている：

var name = '  ';
var cat = setInterval(function(){
  var name = '  ';
  console.log(this.name);//   
  clearInterval(cat);
},500);

実はタイマーの本質は、匿名関数の形でもある。
まとめ:
①一般関数の呼び出しは、windowを指します。
②対象方法の呼び出しは、thisとは、当該オブジェクトのことであり、かつ最も近いオブジェクトのことである。
③コンストラクタの呼び出し、thisとは、実用化された新しいオブジェクトのことです。
④appyとcall呼び出し、thisはパラメータの対象を指します。
⑤匿名関数の呼び出しは、thisがグローバルオブジェクトwindowを指しています。
⑥タイマーからの呼び出しは、グローバル変数windowを指します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。