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

Question

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

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

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

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

现在的主要问题是， submit附着功能#foo可包含多种功能，例如类中： 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));

Answer 2

我想说的不是依靠关键字this ，刚刚成立的当前值的引用this外jQuery的回调。

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

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

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

    }

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

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

Answer 3

在$('#foo').submit您可以添加var that = this; 和validate函数将以这种方式调用： that.validate()