日常開發中經常會遇到 this 指向的 bug,郁悶好久才猛然醒悟,痛定思痛,將 this 做個匯總,以便在日后的開發工作中少走彎路。
注:本文講述只針對瀏覽器環境。
一、全局執行
??
可以看出在全局作用域中 this 指向當前的全局對象 Window。
二、函數中執行
非嚴格模式中
??
嚴格模式中
??
三、作為對象的方法調用
當一個函數被當作一個對象的方法調用的時候,this 指向當前的對象 obj:
??
如果把對象的方法賦值給一個變量,調用該方法時,this 指向 Window:
??
四、作為一個構造函數使用
在 JS 中,為了實現類,我們需要定義一些構造函數,在調用一個構造函數的時候加上 new 這個關鍵字:
??
此時,this 指向這個構造函數調用的時候實例化出來的對象。
當然了,構造函數其實也是一個函數,若將構造函數當做普通函數來調用,this 指向 Window:
??
五、在定時器中使用
??
??
如果沒有特殊指向(指向更改請看下方:怎么改變 this 的指向),setInterval 和setTimeout 的回調函數中 this 的指向都是 Window 。這是因為 JS 的定時器方法是定義在 Window 下的。
六、箭頭函數
在全局環境中調用:
??
作為對象的一個函數調用:
??
??
不難發現,普通函數作為對象的一個函數被調用,this 指向 obj,箭頭函數作為對象的一個函數被調用,this 指向 Window。
特殊情況:結合定時器調用:
??
若在對象的函數中,普通函數作為定時器延時執行的函數調用,this 指向 Window;箭頭函數作為定時器延時執行的函數調用, this 指向定義時所在的對象,也就是 func 中的 this,即 obj。
箭頭函數中 this 的值取決于該函數外部非箭頭函數的 this 的值,且不能通過 call() 、 apply() 和 bind() 方法來改變 this 的值。
七、call、apply、bind
call:
fun.call(thisArg[, arg1[, arg2[, ...]]])
它會立即執行函數,第一個參數是指定執行函數中 this 的上下文,后面的參數是執行函數需要傳入的參數;
apply:
fun.apply(thisArg, [argsArray])
它也會立即執行函數,第一個參數是指定執行函數中 this 的上下文,第二個參數是一個數組,是傳給執行函數的參數(與 call 的區別);
bind:
var foo = fun.bind(thisArg[, arg1[, arg2[, ...]]]);
它不會執行函數,而是返回一個新的函數,這個新的函數被指定了 this 的上下文,后面的參數是執行函數需要傳入的參數;
看個示例:
在這個示例中,call、apply 和 bind 的 this 都指向了 obj,都能正常運行;call、apply 會立即執行函數,call 和 apply 的區別就在于傳遞的參數,call 接收多個參數列表,apply 接收一個包含多個參數的數組;bind 不是立即執行函數,它返回一個函數,需要執行 p2 才能返回結果,bind 接收多個參數列表。
應用:怎么改變 this 的指向
為什么講這個模塊呢,為了便于大家更加透徹的理解上面所講述的 this 指向問題,以及更加徹底的理解 JS 函數中重要的三種方法:call、apply、bind 的使用;并且在實際的項目開發中,我們經常會遇到需要改變 this 指向的情況。
使用 es6 的箭頭函數
??
這時會報錯,因為 setTimeout 里函數的 this 指向 Window,而 Window 對象上是沒有 func1 這個函數的。下面我們來修改成箭頭函數:
??
這時候,沒有報錯,因為箭頭函數的 this 的值取決于該函數外部非箭頭函數的 this 的值,也就是 func2 的 this 的值, 即 obj。
在函數內部使用 _this = this
??
此時,func2 也能正常運行。在 func2 中,首先設置 var _this = this,這里的 this 是指向 func2 的對象 obj,為了防止在 func2 中的 setTimeout 被 window 調用而導致的在 setTimeout 中的 this 為 window。我們將 this (指向變量 obj) 賦值給一個變量 _this,這樣,在 func2 中我們使用 _this 就是指向對象 obj 了。
使用 call、apply、bind
call:
??
apply:
??
bind:??
call、apply、bind 都能改變 this 的上下文對象,所以也沒有報錯,可以正常執行。
具體原因可看上述第七點,call、apply、bind。
new 實例化一個對象
如上:第四點,作為一個構造函數使用。
喜歡小編文章的可以點下關注哦~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/54871.html
摘要:本質上,的虛擬環境目的和上面是一樣的。也就是說每個虛擬環境都是獨立的相互隔離的。你可以把的虛擬環境想象成學校里為做實驗直接出來的整個項目。如果你的項目開發完成不想用這個虛擬環境了該怎么辦呢很簡單,直接刪除就可以了。 什么是Python的虛擬環境 記得在學校寫代碼的時候,那時還沒有用到版本管理系統,在這種情況下如果想要在自己的小項目上做個實驗但是實驗完成后又不想保留這些測試代碼,該怎么辦...
摘要:自動內存管理當你在使用時,實際上并不需要考慮內存。這種自動內存管理可以使開發人員更輕松。即使在手動內存管理的語言中,通常會從語言運行時獲得一些幫助。這就是為什么許多現代語言使用自動內存管理的原因避免人為錯誤。 原文地址:A crash course in memory management 原文作者:Lin Clark 譯者:黑黑 校對者:Bob 要理解為什么將 Array...
閱讀 1387·2023-04-25 16:45
閱讀 1926·2021-11-17 09:33
閱讀 2316·2021-09-27 14:04
閱讀 919·2019-08-30 15:44
閱讀 2640·2019-08-30 14:24
閱讀 3423·2019-08-30 13:59
閱讀 1696·2019-08-29 17:00
閱讀 895·2019-08-29 15:33