javascript - 无法在同一类的另一个方法中使用 'this' 关键字来调用方法

Question

这个问题已经有答案了:

JavaScript - referencing 'this' in an inner function (4 个回答)

已关闭 7 年前。

我试图在用户提交表单后传递警报。 html是这样的

<form id="profile" name="profile">
  <label for="firstName">Male</label>
  <input type="text" name="firstname" id="firstName" maxlength="20" class="required" value=""/>
  <input type="submit" name="sumit" value="submit"/>
</form>

JS 是

var Form = function(){}; 

Form.prototype.formValidate = function($form){

    $form.on('submit', function(e){
    e.preventDefault();
    this.test()// this doesn't work
    //alert('t') // this works
  })

}

Form.prototype.test = function(){
    alert('t');
}
var form = new Form();
form.formValidate($('#profile'))

当我收到错误消息说 ..this.test 不是一个函数时...如果我只是在 e.preventDefault() 之后传递警报，但它无法调用，我就无法通过关键字“this”调用方法。这让我说我的范围不正确。我错过了什么？

Answer 1

在 JavaScript 中，this 的值基于范围。每次您拥有 function(){} 时，您就会拥有一个新的作用域。在每个函数内部，this 都会有所不同，它是根据该函数的调用方式来设置的。

在您执行 this.test() 的地方，this 不是 Form 对象，它是 #profile 元素。您需要将 this 值保存到变量中，以便可以在事件中使用它。

Form.prototype.formValidate = function($form){
    var self = this;

    $form.on('submit', function(e){
        e.preventDefault();
        self.test();
    });
};