用最簡單的方法判斷JavaScript中this的指向(推薦)
都說 JavaScript 是一種很靈活的語言，這其實也可以說它是一個混亂的語言。它把 函數(shù)式編程 和 面向?qū)ο缶幊?糅合一起，再加上 動態(tài)語言 特性，簡直強(qiáng)大無比（其實是不能和C++比的，^_^ ）。
JS 里的 this
- 在 function 內(nèi)部被創(chuàng)建
- 指向調(diào)用時所在函數(shù)所綁定的對象（拗口）
- this 不能被賦值，但可以被 call/apply 改變
目錄
* 一個特例
* 開始判斷
* 法則一：對象方法中的this指向?qū)ο蟊旧恚^函數(shù)形式的除外）
* 法則二：多層嵌套函數(shù)中的this指向等同于包含該this的最近一個function的this
* 法則三：箭頭函數(shù)以及非指向?qū)ο蠓椒ㄖ械膄unction的情況下this指向window
* 習(xí)題集
* 普通函數(shù)中的this
* 函數(shù)執(zhí)行后返回另外一個函數(shù)中的this（普通函數(shù)中）
* 多層嵌套函數(shù)中的this（定時器&箭頭函數(shù)）1
* 多層嵌套函數(shù)中的this（定時器&箭頭函數(shù)）2
一個特例
在正式開始之前，我們先來說一個特例。
// 構(gòu)造函數(shù)
function Student(name) {
this.name = name
}
// 創(chuàng)建小明和小紅兩個實例
var XM = new Student('xiaoming')
var XH = new Student('xiaohong')
// 輸出信息
console.log(XM) // Student {name: "xiaoming"}
console.log(XH) // Student {name: "xiaohong"}
在構(gòu)造函數(shù)中，this上的值會在創(chuàng)建實例的時候被綁定到新創(chuàng)建的實例上。不適用于下面的判斷方法，所以特此說明。
開始判斷
下面是一個典型例子，我們的分析從這里開始。
var x = {
name: 'bw2',
getName1: function() {
console.log(this)
},
getName2: function() {
setTimeout(() => {
console.log(this)
},0)
},
getName31: () => {
console.log(this)
},
getName32: function() {
return function() {
console.log(this)
}
}
}
x.getName1() // {name: "bw2", getName1: ƒ}
x.getName2() // {name: "bw2", getName1: ƒ}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
法則一：對象方法中的this指向?qū)ο蟊旧恚^函數(shù)形式的除外）
var x = {
name: 'bw2',
getName1: function() {
console.log(this)
}
}
x.getName1() // {name: "bw2", getName1: ƒ}
法則二：多層嵌套函數(shù)中的this指向等同于包含該this的最近一個function的this
箭頭函數(shù)沒有獨立的this作用域，所以繼續(xù)往外層走，走到了getName: function(){}。那么就是他了，this指向等同于這個function內(nèi)部的this指向。根據(jù)法則一，this指向?qū)ο蟊旧怼?/p>
var x = {
name: 'bw2',
getName2: function() {
console.log(this) // 等同于此處的this
setTimeout(() => {
console.log(this) // 原始的this位置
},0)
}
}
x.getName2() // {name: 'bw2', getName1: ƒ}
我們可以試著在瀏覽器中運行，看看結(jié)果。
法則三：箭頭函數(shù)以及非指向?qū)ο蠓椒ㄖ械膄unction的情況下this指向window
根據(jù)法則二，this是指向最近的function，因此，這里的this等同于返回的函數(shù)中的this，不是對象方法中的this，所以，指向全局。
是不是感覺有點奇怪？不過實踐證明確實如此。
var x = {
name: 'bw2',
getName31: () => {
console.log(this)
},
getName32: function() {
return function() {
console.log(this)
}
}
}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
習(xí)題集
歡迎大家按照法則一到三依次判斷，猜測結(jié)果，并在瀏覽器下測試。測試結(jié)果也可以回復(fù)，大家一起討論。
因本人能力有限，該系列法則可能在部分情況下失效。歡迎大家一起討論。
下面是做題時間。
普通函數(shù)中的this
function x() {
console.log(this)
}
x()
函數(shù)執(zhí)行后返回另外一個函數(shù)中的this（普通函數(shù)中）
function xx(){
return function() {
console.log(this)
}
}
xx()()
多層嵌套函數(shù)中的this（定時器&箭頭函數(shù)）1
var x = {
name: 'bw2',
getName: () => {
setTimeout(() => {
console.log(this)
},0)
}
}
x.getName()
多層嵌套函數(shù)中的this（定時器&箭頭函數(shù)）2
var x = {
name: 'bw2',
getName: () => {
setTimeout(function() {
console.log(this)
},0)
}
}
x.getName()
再次說明，該法則為實驗性法則，未進(jìn)行大范圍的測試，不保證在所有情況下都有一致的結(jié)果。如果你發(fā)現(xiàn)了法則判斷失敗的情況，歡迎留言，一起探討。
總結(jié)
以上所述是小編給大家介紹的Mysql 5.7.19 winx64 ZIP Archive 安裝及使用教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- js綁定事件this指向發(fā)生改變的問題解決方法
- JavaScript call apply使用 JavaScript對象的方法綁定到DOM事件后this指向問題
- 我所理解的JavaScript中的this指向
- JavaScript this在函數(shù)中的指向及實例詳解
- 淺談JS中幾種輕松處理''this''指向方式
- js中的this的指向問題詳解
- 詳解JavaScript中關(guān)于this指向的4種情況
- js中this的指向問題歸納總結(jié)
- 老生常談JavaScript面向?qū)ο蠡A(chǔ)與this指向問題
- 關(guān)于JavaScript中的this指向問題總結(jié)篇
- JS中this的4種綁定規(guī)則詳解
- 詳解JavaScript的this指向和綁定
相關(guān)文章
這篇文章主要介紹了JS三級可折疊菜單實現(xiàn)方法,以實例形式分析了asp.net結(jié)合JavaScript實現(xiàn)三級折疊菜單的相關(guān)技巧,涉及JavaScript節(jié)點操作實現(xiàn)方法,需要的朋友可以參考下2016-02-02
眾所周知，剛剛開源的「鴻蒙 2.0」以 JavaScript 作為 IoT 應(yīng)用開發(fā)的框架語言。作為科普，這篇文章不會拿著放大鏡找出代碼中的槽點來吹毛求疵，而是希望通俗地講清楚它所支持的 GUI 到底是怎么一回事。2020-09-09
這篇文章主要給大家介紹了關(guān)于利用原生JS獲取URL鏈接參數(shù)的幾種常見方法,文中通過實例代碼以及圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)矩形塊大小任意縮放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
JS實現(xiàn)為動態(tài)創(chuàng)建的元素添加事件操作示例
這篇文章主要介紹了JS實現(xiàn)為動態(tài)創(chuàng)建的元素添加事件操作,涉及javascript頁面元素動態(tài)添加及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了js實現(xiàn)可以點擊收縮或張開的懸浮窗效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
本文主要分享了原生js實現(xiàn)焦點輪播圖效果的示例代碼，并解析了實例中的注意點。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
Bootstrap 粘頁腳，說得具體一點就是“將固定高度的頁腳緊貼頁面底部”，本文給大家分享具有實現(xiàn)代碼，感興趣的朋友參考下吧2016-03-03
layui結(jié)合form,table的全選、反選v1.0示例講解
今天小編就為大家分享一篇layui結(jié)合form,table的全選、反選v1.0示例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
在我們訪問一個圖片展示比較多的網(wǎng)頁時，加載速度慢很多時候正是因為圖片多導(dǎo)致，本文主要介紹了前端必會的圖片懶加載(三種方式)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08