これをJsで解析する例

この記事の内容は、これについて分析例で共有することです。困っている友人はそれを参照してください

例から始めましょう

私が数日面接の質問を読んでいたときのことです。前にこんなプログラムを見ました:

obj = {
  name: 'a',
  getName: function () {
    console.log(this.name);
  }
};

var fn = obj.getName;obj.getName();fn();

問題は、fn() の実行と実行中の this のポイントの結果です。この例とそこに含まれる質問に基づいて、this の使用法を再度まとめてみましょう。 fn()执行的结果和执行时this的指向问题。下面结合这个例子与其中的疑问重新总结一下this的使用。

一 this的执行环境

this的指向要根据其执行环境来决定，主要有以下几种情况：

1 全局上下文环境

全局环境即在任何函数的外部，使用this，则this都指代全局对象。如在浏览器中：

this === window    // true

2 函数上下文环境

在函数上下文环境，即函数内部调用使用this，要取决于this的调用方式。

2.1 简单调用

在简单调用时，函数中的this指向全局对象，比如：

function myFun() {
   console.log(this === window);
}

myFun();    // true

上面这个例子中直接调用了函数myFun，其中的this就等于全局对象window。
其中的原理就是在声明myFun这一函数时，它作为全局对象的一个属性存在。所以直接使用此函数时，即相当于调用了window.myFun()，即其作为window的属性被调用时this即指向window。

在浏览器中调试一下这段程序能更清楚的验证：

2.2 作为对象的方法

当函数作为对象的方法被调用时，其this即指向这个对象。以一开始的例子来说，其执行obj.getName()时，函数中的this即指向了obj这个对象。所以输出a。
但是当我们将这个函数单独分离开，把一开始的例子改变一下：

function myFun() {
  console.log(this.name);
}var obj = {
  name: 'a',
  getName: myFun
};

obj.getName();    // avar obj2 = {
  name: 'b',
  fun: myFun
};

obj2.fun();   // b

从这个例子可以看出，this的指向完全取决于最靠近的成员引用，将函数绑定在哪个对象，哪个引用上，则this就有不同的指向。在上例中我们将带有this的函数分别绑定到了不同的对象上作为其方法，则其this对应着便绑定到不同的对象上，this.name的值便不同。
同理，当我们直接执行myFun()时，此函数即作为全局对象window的一个属性来调用。所以找不到myName属性，输出undefined。(因为全局对象window有默认属性name为空字符串，此处使用myName作为例子)

function myFun() {
  console.log(this.myName);
}
myFun();    // undefined

最后，解释一开始的例子，将obj.getName赋值给了fn，所以，执行fn时即相当于执行了window.fn()，即这个一开始初始化为obj的属性的匿名函数被绑定到了window的fn属性上，所以其this指向window。
由window的name

この実行環境

this の方向は、その実行環境に応じて決定されます。主に次の状況があります:

1 グローバル コンテキスト環境

グローバル環境は関数の外側にあり、使用します。 this の場合、this はグローバル オブジェクトを参照します。たとえば、ブラウザの場合: rrreee

2 関数コンテキスト

関数コンテキスト、つまり関数内で this を呼び出す場合、これがどのように呼び出されるかによって異なります。

2.1 単純な呼び出し

単純な呼び出しでは、関数内の this は次のようなグローバル オブジェクトを指します。 rrreee 上の例では、関数 myFun は直接ここで this はグローバル オブジェクト window と等しくなります。 🎜原則は、関数myFunを宣言するとき、 それはグローバルオブジェクトのプロパティとして存在するということです。したがって、この関数が直接使用される場合、それは window.myFun() を呼び出すことと同じになります。つまり、この関数が window のプロパティとして呼び出される場合、this は window を指します。 🎜🎜このプログラムをブラウザでデバッグして、より明確に確認してください: 🎜🎜

2.2 オブジェクトメソッドとして

🎜関数をオブジェクトメソッドとして使用する場合と呼ばれる、this はこのオブジェクトを指します。最初の例を例に挙げると、obj.getName() が実行されると、関数内の this はオブジェクト obj を指します。したがって、a を出力します。 🎜しかし、この関数を個別に分離する場合は、最初の例を変更します: 🎜rrreee🎜 この例からわかるように、this のポインティングは、最も近いメンバー参照 に完全に依存します。 、関数がどのオブジェクトと参照にバインドされているかによって、これには異なる点があります。上の例では、this を持つ関数をメソッドとして別のオブジェクトにバインドし、対応する this が別のオブジェクトにバインドされます。this.name の値は異なります。 。 🎜同様に、myFun() を直接実行すると、この関数はグローバル オブジェクト window のプロパティとして呼び出されます。したがって、myName 属性が見つからず、unknown が出力されます。 (グローバル オブジェクト window には空の文字列であるデフォルト属性 name があるため、ここでは例として myName が使用されます)🎜 rrreee🎜 最後に、冒頭の例を説明すると、obj.getName が fn に割り当てられているため、fn を実行するのと同等です。つまり、最初に obj の属性として初期化されたこの匿名関数は、window の fn 属性にバインドされます。したがって、this は window を指します。 🎜 window の name 属性は空の文字列であるため、出力は空になります。 🎜🎜関連する推奨事項: 🎜🎜🎜JavaScript でのこの属性の詳細な説明🎜🎜🎜🎜 JavaScript でのこのポインタの詳細な理解🎜🎜

以上がこれをJsで解析する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。