JS this關鍵字在ajax中使用出現(xiàn)問題解決方案

更新時間：2020年07月17日 10:43:32 作者：一生安然

這篇文章主要介紹了JS this關鍵字在ajax中使用出現(xiàn)問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

背景：

　　在一次web網站開發(fā)維護中，使用手機驗證碼進行登錄。再點擊獲取手機驗證碼時，驗證碼按鈕并沒有置灰，同時也沒有出現(xiàn)倒數(shù)讀秒的效果。

設置按鈕倒數(shù)60秒前端代碼：

var clock = '';
  var nums = 60;
  var btn;
  function sendCode(thisBtn) {
    btn = thisBtn;
    btn.disabled = true; //將按鈕置為不可點擊
    btn.value = nums + '秒重新獲取';
    btn.className = 'regGetcodeBtn1';
    if (clickNumber == 0) {
      clock = setInterval(doLoop, 1000); //一秒執(zhí)行一次
    }
  }

function doLoop() {
    nums--;
    if (nums > 0) {
      btn.value = nums + '秒后重新獲取';
      clickNumber = 1;
    } else {
      clearInterval(clock); //清除js定時器
      btn.disabled = false;
      btn.value = '獲取驗證碼';
      btn.className = 'regGetcodeBtn1 color';
      nums = 60; //重置時間
      clickNumber = 0;
    }
  }

在向后端請求獲取短信驗證碼成功之后，調用sendCode()函數(shù)，實現(xiàn)如下效果：

但是在ajax請求，調用時，實際上該效果并沒有出現(xiàn)，代碼如下：

$.ajax({
      url: servletUrl,
      type: "post",
      dataType: 'JSON',
      data: { name: name, securityCode: txtsecurityCode1/* strTelphone: strCodeTelphone, securityCode: txtsecurityCode1*/},
      success: function (result) {
        //已經存在該名字提示用戶
        if (result.status == false) {
          console.log("傳入ajax中的this對象：" + this.location);
          $('#hdVerifCode').val(0);
          nums = 0;
          layer.alert(result.msg, { icon: 2 });
          layer.close(loadingindex);
          // 刷新驗證碼
          $('#secImg').click();
        } else {
          $('#hdVerifCode').val(1);
          sendCode(this);
 
        }
      },

　這個時候，我i傳入一個this，原本意是代替觸發(fā)的btn對象，但是實際上，在傳入sendCode中時，卻并不是我所想的。查閱資料，學習了一下js中this這個關鍵字，好吧，在ajax的success中，this代替了傳入到看ajax的bbjcet對象，而不是觸發(fā)按鈕事件的btn了。所以，并沒有改變按鈕對象的狀態(tài)。

解決辦法：

　　A。在調用ajax方法之前，定義一個對象，接受this指代的對象。var that=this;然后在sendCode(that)傳入包裝好的this對象即可。

　　B。使用bind(this)關鍵字，綁定當前的this的事件對象。

總結 this關鍵字：

1。全局作用域和普通函數(shù)中，指向全局對象window;

console.log(this) //window
 
//function聲明函數(shù)
function bar () {console.log(this)}
bar() //window
 
//function聲明函數(shù)賦給變量
var bar = function () {console.log(this)}
bar() //window
 
//自執(zhí)行函數(shù)
(function () {console.log(this)})(); //window

2。方法調用中，誰調用方法，this指向誰

//對象方法調用
var person = {
 run: function () {console.log(this)}
}
person.run() // person

//事件綁定
var btn = document.querySelector("button")
btn.onclick = function () {
 console.log(this) // btn
}
//事件監(jiān)聽
var btn = document.querySelector("button")
btn.addEventListener('click', function () {
 console.log(this) //btn
})//jqery中的ajax$.ajax(object)在ajax的succes中，this指向了傳入ajax的對象objsuccess:function(){
      $(this).prevAll('p').css("text-decoration","line-through");
　　　　　　}.bind(this)//使用bind(this)綁定當前this事件

3.在構造函數(shù)和構造函數(shù)原型中，this指向構造函數(shù)的實例。

//不使用new指向window
function Person(name) {
 console.log(this) // window
 this.name = name;
}
Person('inwe')
//使用new
var people = new Person('iwen')
function Person(name) {
 this.name = name
 console.log(this) //people
 self = this
}
console.log(self === people) //true
//這里new改變了this指向，將this由window指向Person的實例對象people

4. 箭頭函數(shù)中指向外層作用域的 this

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

您可能感興趣的文章: