javascriptのthisを深く把握することは私たちに何をするのに役立ちますか?

2431 ワード

これは何ですか.
Javascript thisキーワードは、使用する場所と呼び出し方法に応じて異なる値を持つオブジェクトを指します.
  • 使用方法
  • 方法では、この方法の
  • を指す.
  • 関数では、グローバルオブジェクトwindow
  • です.
  • 厳密モードでは、関数ではundefined
  • である.
  • 単独で使用する場合、グローバルオブジェクトwindow
  • である.
  • イベントでは、イベントをトリガするターゲットオブジェクトe.target
  • を指す.

    異なる実行モードでの差異化
    JAvascriptのthisは他のプログラミング言語とは異なり、厳格モードと非厳格モードでは値が異なり、以下に例を挙げる.
    //      
    
    function foo() {
      return this
    }
    
    console.log(foo() === window.foo()) //true
    
    //     
    ;('use strict')
    
    function foo() {
      return this
    }
    
    console.log(foo()) // undefined
    console.log(window.foo()) // window

    非厳密モードでは、fooは、関数呼び出しとしてもメソッド呼び出しとしても、内部thisの指向はwindowである.厳密モードでは、fooが関数として呼び出されたときのthisの値はundefinedであり、windowのオブジェクトのメソッドとして呼び出されたときの値は、呼び出されたwindowのオブジェクトを指す.コード書きの意味化から見ると、このようなthisの指向はより合理的であり、javascriptの実行環境が徐々に厳格なモードに近づいている原因でもあり、言語面から予想に合わない実行結果を排除している.this手動実装関数を活用したcallおよびapplythisの多くの特性を理解した後、私たちはそれを利用してどんな面白い機能を実現することができますか?そう、関数を手動で実装するcallapplyの方法です.
    まず,es5call法がどのような機能を実現しているかを知る必要があり,その最初のパラメータは呼び出し関数のthisバインドであり,残りのパラメータは実行関数に実パラメータとして伝達される.この機能を理解すれば、私たちはそれを実現することができます.
    Function.prototype._call = function _call(context, ...args) {
      if (context == undefined) {
        context = window || global
      } else {
        context = Object(context)
      }
      //              `context` 
    
      context.handler = this
      const result = context.handler(...args)
      delete context.handler
      return result
    }
    
    //     
    const value = 10
    
    const foo = {
      value: 1,
    }
    
    function print(arg) {
      console.log(this.value)
    
      return arg
    }
    
    const retVal = print._call(foo, 2) // 1
    console.log(retVal) // 2
    _call関数の最初のパラメータをthisとして実行関数に伝達するために、ここでは_call関数の内部でトランスフォームを行い、実行すべき関数をcontextオブジェクトの1つのメソッドとして呼び出すことで、関数呼び出し時のthisの指向を変更する問題が実現される.テスト後の実行結果も私たちの予想に合っています.同理apply関数の実装も同様であり,伝達されたパラメータを処理するだけでよいが,ここでは実証しない.
    備考:この文章は作者のオリジナルに属して、転載して出典を明記してください.参照:JavaScriptの深いcallとapplyのシミュレーションの実現