您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
SpringBoot 发布于2019年12月05日 22:57 最近更新于 2019年12月05日 23:17

如何在一个JS回调函数中使用 this ?

2130 次浏览 读完需要≈ 2 分钟 JavaScriptjQuery

我想要在点击某个按钮的时候,使用jQuery向后台发送一个异步Ajax请求,然后将返回的结果来决定是否隐藏该按钮。

大致的实现代码如下:

$("#myButton").click(function(){
    let val = this.value;
    console.log(val);
    $.ajax({
      data: {
        name: val
      },
      // 省略其他参数
      dataType: "json",
      success: function(json){
        if(json.code === 0){
          $(this).hide(); // 隐藏按钮
        }
      }
    });
});

但是,这样的代码在执行时,一直无法正确的隐藏该按钮。我 console.log 了一下这个 this,发现和上面的 this 不一样了。

请问,为什么会这样呢?该如何解决这个问题?

1 个回答

Ready · 4年前

你这里其实定义了两个 function,一个是 click(),一个是 success()success() 是完全定义在 click() 里面的。

函数虽然可以嵌套,但是每个函数里的 this 是不可以直接从外部包裹函数继承的。函数里面的this取决于该函数所定义的位置,而取决于该函数被调用的方式

这里面存在多种情况,详细叙述起来比较复杂,这里先略过,以后再专门写一篇文章详细介绍 JavaScript 中的 this 关键字。

我们先解决你目前遇到的问题: 你需要在外部函数 click() 中定义一个变量并将其赋值为 this,然后在内部函数 success() 中使用该变量来引用外部的this

$("#myButton").click(function(){
    let val = this.value;
    console.log(val);
    let self = this; // 定义一个变量表示 this
    $.ajax({
      data: {
        name: val
      },
      // 省略其他参数
      dataType: "json",
      success: function(json){
        if(json.code === 0){
          // 使用 self 而不是 this
          $(self).hide(); // 隐藏按钮
        }
      }
    });
});

撰写答案