JavaScriptにおけるこのポインティング問題の詳細な説明

序文

JS の this ポインターは、初心者にとって常に頭痛の種でした。今日は、これが地面に落ちたときに何が起こったのかを見て、これが指し示す原理について詳しく話して、これが指し示すことについてこれ以上心配しなくて済むようにしましょう。

導入

まず、これが JavaScript 言語のキーワードであることは誰もが知っています。

これは、関数の実行時に自動的に生成され、関数内でのみ使用できる内部オブジェクトを表します。この値は、関数が使用される場所に応じて変化します。ただし、一般的な原則として、関数が定義されているときには this の方向は決定できません。関数が実行されたときにのみ、 this が実際に指しているオブジェクトを決定できます。実際、 this は最終的に、それが配置されている関数を呼び出すオブジェクトを指します。それでは、この問題を段階的に検討してみましょう。

1つを探索

関数a() {
  var user = "蒸し鯉";
  console.log(this.name); //未定義
  console.log(this); //ウィンドウ
 }
 （）;
 window.a(); // 2つの結果は同じです

上で述べたように、これは最終的に、それが配置されている関数を呼び出すオブジェクトを指します。ここで、 a は実際には window オブジェクトによって指されています。

探索2

var obj = {
  名前:「蒸しアコウ」
  f1: 関数() {
   console.log(this.name); //蒸しコイ}
 };
 obj.f1();

関数が定義されているときには this の方向を決定できないことを再度強調することが重要です。関数が実行されたときにのみ、this が指している対象を決定できます。この例では、this が配置されている f1 関数は obj オブジェクトによって呼び出されるため、ここで this は obj オブジェクトを指しています。

探索3

これを完全に理解したい場合は、次の例を見る必要があります。

var obj = {
  a: 5,
  b: {
   10,
   fn:関数(){
    コンソールログ(this.a); //10
   }
  }
 };
 obj.b.fn();

これは、最終的には、それが配置されている関数を呼び出すオブジェクトを参照するという意味ではないでしょうか?なぜこれは obj オブジェクトを指していないのでしょうか?

ここで 3 つの点を追加する必要があります。

関数に this があっても、親オブジェクトによって呼び出されない場合は、this は window を参照します。
関数に this があり、前のレベルのオブジェクトによって呼び出される場合、 this は前のレベルのオブジェクトを参照します。
関数に this があり、複数のオブジェクトが含まれている場合、関数が最も外側のオブジェクトによって呼び出されても、this はその 1 レベル上のオブジェクトのみを指します。

これを見て、皆さんは this のポイントの原理を基本的に理解したと思います。もう一度繰り返しますが、関数が定義されているときには this のポイントは決定できません。関数が実行されたときにのみ、 this が実際に誰を指しているかを判断できます。実際、 this は最終的に、それが配置されている関数を呼び出すオブジェクトを指します。

これにはいくつかの異なる使用シナリオがあります

コンストラクタ（新しいキーワード）の場合

関数 Student() {
  this.name = '蒸しファットヘッドフィッシュ';
 }
 var s1 = 新しい学生();
 console.log(s1.name); // 蒸しコイ

オブジェクト s1 が関数 Student 内の名前を指すことができる理由は、new キーワードによって this のポインターがオブジェクト s1 を指すように変更できるためです。

// new キーワードの実行プロセス 1. 関数本体に空のオブジェクトを作成します。
 2. 現在の this がこの空のオブジェクトを指すようにします。
 3. これを介して、現在空のオブジェクトにキーと値のペアを追加します。
 4. すべてのキーと値のペアを外部変数に追加されたオブジェクトを返します。

タイマー内のthisポインタ

var 数値 = 0;
 関数Obj() {
  数値 = 1;
  this.getNum1 = 関数（）{
   コンソールにログ出力します。
  };
  this.getNum2 = 関数（）{
   setInterval(関数() {
    コンソールにログ出力します。
   }, 1000);
  };
 }
 var o = 新しいObj();
 o.getNum1();//1 (o.num)
 o.getNum2();//0 (ウィンドウ番号)

o.getNum2()の値が 0 である理由は、 this wi windowを指しているためです。説明するために、 this の指し示す原則を取り上げてみます。関数が定義されているときには、 thisの指し示す先は決定できません。関数が実行されたときにのみ、 this実際に指している先を決定できます。実際、 this最終的に、それが配置されている関数を呼び出すオブジェクトを指します。

解決策: this.numが配置されている関数は、タイマーsetInterval内のfunction () { console.log(this.num);}です。 this ポインティング原則によれば、関数が実行されると、 this はその親オブジェクトを指します。 setIntervalあり、 setInterval windowによって指されているため、 this windowを指します。

call 、 apply 、 bind方向を変える

var 数値 = 0;
 関数Obj() {
  数値 = 1;
  this.getNum1 = 関数（）{
   コンソールにログ出力します。
  };
  this.getNum2 = 関数（）{
   setInterval(関数() {
    コンソールにログ出力します。
   }.bind(this), 1000);//bind を使用して this をこの関数にバインドします};
 }
 var o = 新しいObj();
 o.getNum1();//1 (o.num)
 o.getNum2();//1 (o.num)

説明する：

bind() メソッドは Function.prototype のメソッドです。バインドされた関数によって呼び出されると、bind メソッドは新しい関数を作成し、最初のパラメータを新しい関数のランタイム this として使用します。

原則によれば：

bindメソッドを使用する前: 呼び出されたとき: this.num 、それが配置されている関数を呼び出すオブジェクト、つまりwindow.setTimeoutオブジェクトを指します。 bindメソッドを使用した後、呼び出されると、元のthisはgetSum2関数 (新しいthisが配置されている関数) を呼び出すオブジェクトにリダイレクトされます。ここで、コンストラクターはnewを通じて呼び出されるため、 o オブジェクトを指します。

このような状況では、 bindメソッドがより一般的に使用されます。もちろん、代わりにcallまたはapplyメソッドを使用した場合も結果は正しいですが、 callとapplyメソッドは呼び出し後すぐに実行されるため、遅延効果はなく、タイマーは意味をなさなくなります。

上記は、JavaScript の this ポイントの問題の詳細な説明です。JavaScript の this ポイントの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: