このオブジェクトのjsでの使用例を詳しく解説

このオブジェクトは、関数の実行時に関数の実行環境に基づいてバインドされます。この記事では主に、js でのこのオブジェクトの使用法の詳細な分析を紹介します。必要な友人がそれを学び、共有できると幸いです。

実際、この文の本質は、関数を呼び出す人が誰であろうと、これは誰を指すかということです

具体的には、通常次のような状況があります:

グローバル関数

グローバル環境では、これは Window を指す

//例子1
 function A() {
 console.log(this)
 }
 A();//Window

上の例は非常に単純です。関数 A はグローバル環境で実行されます。つまり、グローバル オブジェクト Window が関数を呼び出します。このとき、これはWindow

オブジェクトのメソッドを指します

オブジェクトメソッドとして呼び出された場合は、そのメソッドを呼び出すオブジェクトを指します

//例子2
var b = {
 getThis:function(){
  console.log(this)
 }
}
b.getThis()//b

これまでに挙げた例は比較的単純なものです次はわかりやすいです。 :

//例子3
 var c = {
 getFunc:function(){
  return function(){
  console.log(this)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//Window

この例は、c.getFunc() を実行すると、最初に返されるのが匿名関数です。 cFun を呼び出してから cFun( グローバル環境 ) を呼び出すため、この時点ではまだ Window を指しています。

ここで c オブジェクトを返さなければならない場合はどうすればよいでしょうか?冒頭で、 this オブジェクトは関数の実行時に決定されると述べましたが、 c.getFunc() が実行されるとき、 this オブジェクトは依然として c を指しているため、上記では this を保持するだけで済みます。コードは少し変更されました:

//例子4
 var c = {
 getFunc:function(){
  var that = this //在这里保留住this
  return function(){
  console.log(that)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//c

これが、一部のコードで var self = this または var that = this がよく見られる理由です。

call と apply

この時点で、this オブジェクトは通常、関数で指定された this の値を指します (通常、ここに 2 つの単語があり、試験でテストされることに注意してください)

call と apply は決まり文句です、でも簡単に紹介しましょう。新入生はまだ触れていないかもしれません（実際にはいくつかの単語を作るためだけです）。call を例に挙げます。構文は次のとおりです

fun.call(thisArg, arg1, arg2, ...)

使い方このメソッドについては、次の例を見てください:

//例子5
var d = {
 getThis:function(){
  console.log(this)
 }
}
var e = {
 name:'e'//(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
}
d.getThis.call(e)//e

ここで呼び出し関数の意味がわかります: オブジェクト o1 を指定して、他のオブジェクト o2 のメソッドを呼び出します。 この時点で、このオブジェクトは o1 を指します。

それでは、なぜ前に普通と言ったのですか?ここでの thisArg は null および未定義として指定できるためです。参照してください:

//例子6
var d = {
 getThis:function(){
  console.log(this)
 }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

現時点では、これはグローバル オブジェクト Window を指します

Arrow 関数

es6 の arrow 関数も今ではより頻繁に使用されていますが、注意が必要な点があります:

関数本体 this オブジェクトは、それが使用されるオブジェクトではなく、それが定義されるオブジェクトです。

実際、この状況の根本原因は次のとおりです: アロー関数にはこのオブジェクトがないため、アロー関数の this は外部コードの this になります

//例子7
 var f = {
  getThis:()=>{
   console.log(this)
  }
 }
 f.getThis()//Window

この例は基本的に次と同じです前の例 2 では、通常の The 関数がアロー関数として書き換えられていますが、この時点で this オブジェクトはすでに外側の Window を指しています。

これが理解しにくいかもしれないことを考慮して、さらにいくつかの例を見てみましょう:

//例子8
 var g = {
 getThis:function(){
  return function(){console.log(this)}
 }
 }
 var h = {
 getThis:function(){
  return ()=> console.log(this)
 }
 }
 g.getThis()()//Window
 h.getThis()()//h

この例では、g の getThis は前の例 3 と同じように記述されています。関数はグローバル環境で実行されるため、 this このとき、this は Window h の getThis を指します。したがって、this は外側のコード ブロックの this を指します。

概要

一般に、このオブジェクトは、グローバル環境では、呼び出し関数のオブジェクトを指します。このオブジェクトは、呼び出し関数と適用関数では、指定された関数を指します。指定されたペアが未定義または null の場合、このオブジェクトは Window を指します

アロー関数では、このオブジェクトは外側のコード ブロックのこれに相当します

関連する推奨事項:

違いの詳細な例thisとjsのeventの間

JSのthisをトリガーバグ分析

JavaScriptでthisを包括的に分析

以上がこのオブジェクトのjsでの使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。