Jsでよくあるthis指向の問題

仕事中でも面接中でも、この指向問題はよくあります.だからこの文章はよくある指向問題をみんなに列挙して、穴を踏まないようにします.まず、関数の中でthisがどの値を取るかは、関数が本当に呼び出されて実行されたときに決定され、関数が定義されたときに決定されないことを知っておく必要があります.つまり、thisの指向は関数呼び出しの位置に完全に依存します.この値は役割ドメイン環境の一部であるため、関数を呼び出すたびに異なる役割ドメイン環境になります.
1:グローバル環境
ブラウザ環境厳格モード(nodeとは異なる)では、thisはデフォルトでwindowを指します.直ちに関数を実行し、デフォルトのタイマなどの関数を実行します.thisもwindowを指します.

    console.log(this === window) // true
    function fn(){
        console.log(this === window)
    }
    fn() // true
    (function(){
        console.log(this === window) // true
    })()
    setTimeout(function() {
      console.log(this === window); //true
    }, 500)

2:オブジェクト関数
関数がオブジェクトのプロパティとして呼び出された場合、関数のthisはオブジェクトを指します.

    var x = 10 //     window.x = 10
    var obj = {
        x: 20,
        f: function(){
            console.log(this.x)
        },
        s: function(){
            console.log(this.x) // 20
            function fn(){
              console.log(this.x)
            }
            return fn  //   f    obj.fn     ，             ，this    window
        }
    }
    var fn = obj.f
    fn()  // 10 
    obj.f() // 20
    obj.s()() // 10

まずfn()を呼び出してなぜ結果が10なのか、変数fnが新しく作成されたため、fn = function(){ console.log(this.x)}に相当し、関数のthisはデフォルトでwindowを指しているため、出力は10となる.一方、obj.f()でthisはobjを指すため、this.x = obj.xで出力結果は20である.
3:コンストラクション関数
コンストラクション関数で作成されたインスタンスのプロパティは、コンストラクション関数のprototypeを指します.

    function Man(name){
        this.name =  name
    }
    Man.prototype.getName = function(){
        // this   Man
        return this.name
    }
    const tom = new Man('tom')
    console.log(tom.getName()) // 'tom'
    
    //               ，        ，  
    function Man(name){
        this.name =  name
        return {
            name: 'lily'
        }
    }
    Man.prototype.getName = function(){
        // this   Man
        return this.name
    }
    const tom = new Man('tom')
    console.log(tom.name) // 'lily'
    

4:矢印関数
矢印関数のthisは、関数を定義するときにバインドされ、実行中にバインドされるものではありません.矢印関数のthisは、関数が作成されたときの役割ドメイン環境に依存します.

    //      
    var x= 10
    var obj ={
      x: 20, 
      f1: function(){
        console.log(this.x)
      },
      f2: () => {
        console.log(this.x) //    window
      }
    }
    obj.f1() // 20
    obj.f2() // 10
    
    //      
    var name = "jack"
    var man = {
      name: 'tom',
      f1: function(){
        //    this    setTimeout    this  
        var that = this
        setTimeout(()=>{
          console.log(this.name, that === this) // 'tom' true
        }, 0)
      },
      f2: function(){
        //    this    setTimeout    this   
        var that = this
        setTimeout(function(){
          console.log(this.name,  that === this) // 'jack' false
        }, 0)
      }
    }
    man.f1()  // 'tom' true
    man.f2() // 'jack' false

settimeoutはデフォルトでwindowを指しますが、矢印関数ではthisの役割ドメイン環境がman内にあるため、thisはmanを指します.すなわち,このときのthisは周辺パケットのsettimeoutタイマ関数を無視し,1層および役割ドメインを見ることができる.
5:domノード
特にreactのjsx構文では、domのthis指向を変更するのが一般的です.そうしないと、指定した執関数は取得されません.したがって、bindバインドイベントは、通常、関数宣言で使用する必要があります.

    // html
    myBtn
    
    // js
    var name = 'window'
    var btn = document.getElementById('btn')
    btn.name = 'dom'
    var fn =  function (){console.log(this.name)}
    btn.addEventListener('click', f()) // this   btn
    btn.addEventListener('click', f.bind(obj)) //  this   window

本稿では、比較的一般的なケースについて説明します.thisをより深く理解するには、githubの記事☛トランスファゲートを参照してください.