聊一聊JS中this的指向問題

更新時間：2016年06月17日 10:51:28 作者：沫晴的前端世界

這篇文章主要為大家詳細介紹了聊一聊JS中this的指向問題，幫助大家輕松了解JS中this的指向，感興趣的小伙伴們可以參考一下

JS中的this指向一直是個讓人頭疼的問題，想當初我學的是天昏地暗，查了好多資料，看的頭都大了，跟他大戰(zhàn)了那么多回合，終于把它搞定個七八分，其實往往都是我們復雜化了，現(xiàn)在就讓大家輕松看懂this的指向，我會分以下幾種情況來說。
this的指向：
1、this 指的是調用當前方法（函數）的那個對象，也就是說函數在誰那被調用，this就指的是誰。
來看兩個栗子：

 oBtn.onclick = function(){ 
    alert(this);  //oBtn
 }

 

 oBtn[i].onclick = fn1;

  function fn1(){ 

  alert(this); //oBtn
 }

很容易看出，函數是在按鈕對象被點擊的時候調用，所以this指的是obtn，這兩種情況是等同的是，只是調用函數的寫法不同。
2 當函數里面嵌套函數的時候，嵌套的那個函數里面的this指的是window,不要過分深究這個原因，因為這是JS的一個特性。
來看個栗子：

oBtn.onclick = function(){

   alert(this); //oBtn(記得這里還是oBtn)

   fn1(); 
  }

 function fn1(){ 
  alert(this); // window
  }

3 、對于上述情況，當我們需要fn1里面的this指向按鈕的時候怎么辦呢，這個時候有兩種方法。
1) 將this作為參數傳函數去
2) 將this保存起來賦給另一個變量
來看兩個栗子：

oBtn.onclick = function(){

   alert(this); //oBtn

   fn1(this); 1 將上面的this作為參數傳函數去
  }

 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的指向，最基礎的也就這幾種，很多復雜的也是由基礎演變的。有沒有輕松掌握呢。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Bootstrap基本樣式學習筆記之標簽(5)
這篇文章主要介紹了Bootstrap學習筆記之標簽基本樣式的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
javascript html5輕松實現(xiàn)拖動功能
這篇文章主要為大家詳細介紹了javascript html5輕松實現(xiàn)拖動功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
JS中跳出循環(huán)的示例代碼
for循環(huán)中我們使用continue；終止本次循環(huán)計入下一個循環(huán)，使用break終止整個循環(huán)。下面小編通過本文給大家分享JS中跳出循環(huán)的示例代碼，需要的朋友參考下吧
2017-09-09
JavaScript中合并數組的N種方法
這篇文章主要介紹了JavaScript中合并數組的N種方法,本文使用concat、循環(huán)插入、reduce等方法合并JavaScript數組,需要的朋友可以參考下
2014-09-09
Textarea輸入字數限制實例(兼容iOS&安卓)
下面小編就為大家?guī)硪黄猅extarea輸入字數限制實例(兼容iOS&安卓)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
BootStrap 超鏈接變按鈕的實現(xiàn)方法
這篇文章主要介紹了BootStrap 超鏈接變按鈕的實現(xiàn)方法以及js按鈕bootstrap超鏈接的操作方法，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧
2016-09-09
javascript中創(chuàng)建對象的三種常用方法
在javascript中創(chuàng)建對象的三種方法，腳本之家以前發(fā)布過有簡單實例版的，大家可以參考下。
2010-12-12
JS一次前端面試經歷記錄
這篇文章主要介紹了JS一次前端面試經歷,結合具體案例形式分析了JS前端面試過程中遇到的問題以及響應的注意事項,需要的朋友可以參考下
2020-03-03
Javascript 顏色漸變效果的實現(xiàn)代碼
在搭建博主博客的時候，尋思著做一些效果，看到菜單，就想是不是可以做一下顏色的漸變，增加一點動態(tài)的感覺。有個jquery的插件，效果相當不錯，不過博主還是打算自立更生寫一下，看看能不能實現(xiàn)
2013-10-10
手機軟鍵盤彈出時影響布局的解決方法
這篇文章主要介紹了手機軟鍵盤彈出時影響布局的解決方法的相關資料,大家開發(fā)移動端的軟件時候，肯定會因為軟鍵盤的彈窗影響布局，這里說下如何解決，需要的朋友可以參考下
2016-12-12