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() が呼び出されます。グローバル環境では、これは It's Still 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

ここで call 関数がわかります。意味: オブジェクト 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 関数も今ではより頻繁に使用されていますが、注意が必要な点が 1 つあります:

このオブジェクト関数 body 内の は、関数が使用されるオブジェクトではなく、関数が定義されているオブジェクトです。

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

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

この例は、基本的に前の例 2 と同じです。 , 通常の関数をアロー関数に書き換えるだけですが、この時点で 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 と同じように記述されています。関数はグローバル環境で実行されるため、これは次を指します。 Window;hのgetThisはarrow関数を使っているので、thisは外側のコードブロックのthisを指します。

概要

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

アロー関数では、このオブジェクトは外側のコード ブロックの this と同等です

で、エラーがある場合でも、毎回同じように終了します。内容については、役に立ちましたらご指摘ください。いいね、収集を歓迎します。スクリプト ハウスをサポートしていただきありがとうございます。

上記は私があなたのためにまとめたものです。

関連記事:

express+multerで画像アップロード機能を実装する方法

Vueでテーブルヘッダーと最初の列の固定を実装する方法

jquery.picsignで画像アノテーションコンポーネントを使用する方法

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