快捷導(dǎo)航

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

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

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

背景：

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

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

var clock = '';
  var nums = 60;
  var btn;
  function sendCode(thisBtn) {
    btn = thisBtn;
    btn.disabled = true; //將按鈕置為不可點(diǎn)擊
    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定時(shí)器
      btn.disabled = false;
      btn.value = '獲取驗(yàn)證碼';
      btn.className = 'regGetcodeBtn1 color';
      nums = 60; //重置時(shí)間
      clickNumber = 0;
    }
  }

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

但是在ajax請(qǐng)求，調(diào)用時(shí)，實(shí)際上該效果并沒(méi)有出現(xiàn)，代碼如下：

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

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

解決辦法：

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

　　B。使用bind(this)關(guān)鍵字，綁定當(dāng)前的this的事件對(duì)象。

總結(jié) this關(guān)鍵字：

1。全局作用域和普通函數(shù)中，指向全局對(duì)象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。方法調(diào)用中，誰(shuí)調(diào)用方法，this指向誰(shuí)

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

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

3.在構(gòu)造函數(shù)和構(gòu)造函數(shù)原型中，this指向構(gòu)造函數(shù)的實(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的實(shí)例對(duì)象people

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: