javascript - 使用bind(this)时如何访问$(this)？

Question

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

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

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

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

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

Helper.prototype.validate = function()
{
    // some content
}

我需要使用 this 访问这些函数，因此我在 submit 的末尾附加了代码:bind(this)我只需使用 this.validate 即可调用 Helper 类的 validate 函数。

上面的场景会导致 $(this) 参数出现一些问题，事实上，如果我尝试访问表单的 action ，那么我会得到空字符串，因为 javascript 将搜索 Helper 类中的变量 action。

如果删除 bind(this)，我可以访问表单的操作，但我将失去对 validate 函数的访问权限。

有人有办法解决这个问题吗？

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

function()
{
    Helper.prototype.bindEventHandlers = function()
    {
        $('#foo').submit(function (event)
        {
            event.preventDefault();

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

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

        Helper.prototype.validate = function()
        {
           ...
        });
    }
}

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));