ES6 箭頭函式下的this指向

楊小匠發表於2018-07-23

  在javscript中,this 是在函式執行時自動生成的一個內部指標,它指向函式的呼叫者。

  箭頭函式有些不同,它的this是繼承而來, 預設指向在定義它時所處的物件(宿主物件),而不是執行時的物件。 

    var name = "window";
    var test = {
        name:"demo",
        // 傳統函式
        getName1: function(){
            console.log(this.name);  // demo
            var that = this;
            setTimeout(function(){
                console.log(this.name);  // window
                console.log(that.name);  // demo
            },500)
        },

        // 箭頭函式-作為非同步回撥
        getName2:function(){
            setTimeout(()=>{
                console.log(this.name)  // demo
            },500)
        },

        // 箭頭函式-作為直接執行的方法
        getName3:()=>{
            console.log(this.name)  // window
        }
    };

  如上getName3(),將箭頭函式作為直接執行的方法來寫時要特別小心,它的this會直接指向window。

  

 

相關文章