聊一聊JS中this的指向問(wèn)題
JS中的this指向一直是個(gè)讓人頭疼的問(wèn)題，想當(dāng)初我學(xué)的是天昏地暗，查了好多資料，看的頭都大了，跟他大戰(zhàn)了那么多回合，終于把它搞定個(gè)七八分，其實(shí)往往都是我們復(fù)雜化了，現(xiàn)在就讓大家輕松看懂this的指向，我會(huì)分以下幾種情況來(lái)說(shuō)。
this的指向：
1、this 指的是調(diào)用當(dāng)前方法（函數(shù)）的那個(gè)對(duì)象，也就是說(shuō)函數(shù)在誰(shuí)那被調(diào)用，this就指的是誰(shuí)。
來(lái)看兩個(gè)栗子：
oBtn.onclick = function(){
alert(this); //oBtn
}
oBtn[i].onclick = fn1;
function fn1(){
alert(this); //oBtn
}
很容易看出，函數(shù)是在按鈕對(duì)象被點(diǎn)擊的時(shí)候調(diào)用，所以this指的是obtn，這兩種情況是等同的是，只是調(diào)用函數(shù)的寫(xiě)法不同。
2 當(dāng)函數(shù)里面嵌套函數(shù)的時(shí)候，嵌套的那個(gè)函數(shù)里面的this指的是window,不要過(guò)分深究這個(gè)原因，因?yàn)檫@是JS的一個(gè)特性。
來(lái)看個(gè)栗子：
oBtn.onclick = function(){
alert(this); //oBtn(記得這里還是oBtn)
fn1();
}
function fn1(){
alert(this); // window
}
3 、對(duì)于上述情況，當(dāng)我們需要fn1里面的this指向按鈕的時(shí)候怎么辦呢，這個(gè)時(shí)候有兩種方法。
1) 將this作為參數(shù)傳函數(shù)去
2) 將this保存起來(lái)賦給另一個(gè)變量
來(lái)看兩個(gè)栗子：
oBtn.onclick = function(){
alert(this); //oBtn
fn1(this); 1 將上面的this作為參數(shù)傳函數(shù)去
}
function fn1(obj){
alert(obj); // oBtn
}
var that = null;
oBtn[i].onclick = function(){
alert(this); //oBtn
that = this ;// 將上面的this保存起來(lái)賦給另一個(gè)變量
fn1();
}
function fn1(){
alert(that); // 指向oBtn
}
OK，this的指向，最基礎(chǔ)的也就這幾種，很多復(fù)雜的也是由基礎(chǔ)演變的。有沒(méi)有輕松掌握呢。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap基本樣式學(xué)習(xí)筆記之標(biāo)簽(5)
這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之標(biāo)簽基本樣式的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
javascript html5輕松實(shí)現(xiàn)拖動(dòng)功能
這篇文章主要為大家詳細(xì)介紹了javascript html5輕松實(shí)現(xiàn)拖動(dòng)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
for循環(huán)中我們使用continue；終止本次循環(huán)計(jì)入下一個(gè)循環(huán)，使用break終止整個(gè)循環(huán)。下面小編通過(guò)本文給大家分享JS中跳出循環(huán)的示例代碼，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了JavaScript中合并數(shù)組的N種方法,本文使用concat、循環(huán)插入、reduce等方法合并JavaScript數(shù)組,需要的朋友可以參考下2014-09-09
Textarea輸入字?jǐn)?shù)限制實(shí)例(兼容iOS&安卓)
下面小編就為大家?guī)?lái)一篇Textarea輸入字?jǐn)?shù)限制實(shí)例(兼容iOS&安卓)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
BootStrap 超鏈接變按鈕的實(shí)現(xiàn)方法
這篇文章主要介紹了BootStrap 超鏈接變按鈕的實(shí)現(xiàn)方法以及js按鈕bootstrap超鏈接的操作方法，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-09-09
javascript中創(chuàng)建對(duì)象的三種常用方法
在javascript中創(chuàng)建對(duì)象的三種方法，腳本之家以前發(fā)布過(guò)有簡(jiǎn)單實(shí)例版的，大家可以參考下。2010-12-12
這篇文章主要介紹了JS一次前端面試經(jīng)歷,結(jié)合具體案例形式分析了JS前端面試過(guò)程中遇到的問(wèn)題以及響應(yīng)的注意事項(xiàng),需要的朋友可以參考下2020-03-03
Javascript 顏色漸變效果的實(shí)現(xiàn)代碼
在搭建博主博客的時(shí)候，尋思著做一些效果，看到菜單，就想是不是可以做一下顏色的漸變，增加一點(diǎn)動(dòng)態(tài)的感覺(jué)。有個(gè)jquery的插件，效果相當(dāng)不錯(cuò)，不過(guò)博主還是打算自立更生寫(xiě)一下，看看能不能實(shí)現(xiàn)2013-10-10
手機(jī)軟鍵盤(pán)彈出時(shí)影響布局的解決方法
這篇文章主要介紹了手機(jī)軟鍵盤(pán)彈出時(shí)影響布局的解決方法的相關(guān)資料,大家開(kāi)發(fā)移動(dòng)端的軟件時(shí)候，肯定會(huì)因?yàn)檐涙I盤(pán)的彈窗影響布局，這里說(shuō)下如何解決，需要的朋友可以參考下2016-12-12