Question

假设我有一个附加到以下javascript函数的表单：

$('#foo').submit(function (event)
{
    event.preventDefault();

    if (!this.validate()) {
        return;
    }

    console.log($(this).attr('action'));
}.bind(this));

现在的主要问题是，附加到submit的{{1}}函数在包含其他函数的类中可用，例如：#foo：

validate

我需要使用Helper.prototype.validate = function() { // some content }访问这些函数，因此我在this的末尾附加了代码：submit，并且能够调用{{1}只需使用bind(this)就可以使validate类的}函数。

上述情况会在Helper参数上引起一些问题，实际上，如果我尝试访问表单的this.validate，那么我会得到一个空字符串，因为javascript将搜索该变量$(this)中的action。

如果删除action，我可以访问表单的操作，但是将失去对Helper函数的访问权限。

有人有解决的办法吗？

js文件的通用结构是这样的：

bind(this)

Answer 1

不能。

bind的全部要点是替换this的值。

如果您想访问this和另一个值，请不要使用bind。将值存储在其他变量中。考虑使用IIFE：

$('#foo').submit(
  function (context) {
    return function(event) {
      event.preventDefault();

      if (!context.validate()) {
        return;
      }

      console.log($(this).attr('action'));
    }
  }(this)
);

您可能希望将其拆分以减少笨拙程度：

function thingy_factory(context) {
  function thingy(event) {
    event.preventDefault();
    if (!context.validate()) {
      return;
    }

    console.log($(this).attr('action'));
  }
  return thingy;
}

和

$('#foo').submit(thingy_factory(this));

Answer 2

我会说，不用依赖关键字 this ，而是在jQuery回调之外设置对 this 的当前值的引用。

  function（）{
   Helper.prototype.bindEventHandlers = function（）{
       var context = this;
       $（'＃foo'）。submit（function（event）{
            event.preventDefault（）;

            if（！context.validate（））{
                返回;
            }

            console.log（$（this）.attr（'action'））;
        }）;

    }

     Helper.prototype.validate = function（）{
         ...
     }）;
}

我将Helper.prototype.validate从 bindEventHandlers 中移出了，我假设这就是您的意图。可能只是格式错误。

Answer 3

在$('#foo').submit之前，您可以添加var that = this;并通过以下方式调用验证函数：that.validate()

使用bind（this）时如何访问$（this）？

3 个答案: