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