問題描述: 前些天在練習寫一個小例子的時候用到了定時器,發現在setInterval和setTimeout中傳入函數時,函數中的this會指向window對象,如下例: var num = 0;function Obj (){ this.num = 1, this.getNum = function ...
問題描述:
前些天在練習寫一個小例子的時候用到了定時器,發現在setInterval和setTimeout中傳入函數時,函數中的this會指向window對象,如下例:
var num = 0; |
問題原因:
從上述例子中可以看到setTimeout中函數內的this是指向了window對象,這是由於setTimeout()調用的代碼運行在與所在函數
完全分離的執行環境上。這會導致這些代碼中包含的 this
關鍵字會指向 window
(或全局
)對象。詳細可參考MDN setTimeout
解決方法:
若想要讓setTimeout中的this指向正確的值,可以使用以下三種比較常用的方法來使this指向正確的值:
1.將當前對象的this存為一個常量,定時器內的函數利用閉包來訪問這個常量,如下:
var num = 0; |
這種方法是將當前對象的引用放在一個變數里,定時器內部的函數來訪問到這個變數,自然就可以得到當前的對象。
2.利用bind()方法
var num = 0; |
bind()方法是在Function.prototype上的一個方法,當被綁定函數執行時,bind方法會創建一個新函數,並將第一個參數作為新函數運行時的this。在這個例子中,在調用setTimeout中的函數時,bind方法創建了一個新的函數,並將this傳進新的函數,執行的結果也就是正確的了。關於bind方法可參考 MDN bind
3. 箭頭函數
var num = 0; |
ES6中的箭頭函數完全修複了this的指向,this總是指向詞法作用域,也就是外層調用者obj,因此利用箭頭函數就可以輕鬆解決這個問題。
以上三種方法都是比較常用的,當然如果使用call或apply方法來代替bind方法,得到的結果也是正確的,但是call方法會在調用之後立即執行,那樣也就沒有了延時的效果,定時器也就沒有用了,所以推薦使用上述方法來將this傳進setTimeout和setInterval中。