Javascript 使用绑定（this）时如何访问$（this）？

假设我将一个表单附加到以下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）

参数出现一些问题，事实上，如果我尝试访问表单的

操作

，那么我将得到一个空字符串，因为javascript将在类

助手

中搜索变量

操作

如果我删除

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()
        {
           ...
        });
    }
}

你不能

bind

的全部要点是替换

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

及

你不能

bind

的全部要点是替换

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

及

---

我想说的是，与其依赖关键字

this

，不如在jQuery回调之外设置一个对

this

当前值的引用

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

，我假设这就是您的意图。可能是格式错误。

我想说的是，与其依赖关键字

this

，不如在jQuery回调之外设置对

this

当前值的引用

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

，我假设这就是您的意图。可能是格式错误。

之前的

$（“#foo”）。提交

您可以添加

var=this

和validate函数将以以下方式调用：

that.validate（）

在

$（'#foo'）之前。提交
您可以添加
var that=this
和validate函数将以这种方式调用：
that.validate（）
您不能覆盖已
绑定的函数的
this
。您应该在外部分数中创建对类对象的额外引用（例如
var self=this
），将
this
留给jQuery使用，正如已经指出的那样，如果没有绑定，您将无法访问预期的
this
。但是，您可以使用
event.target
访问事件目标，从那里您应该可以执行几乎所有的操作。您可以通过
$（event.target）
访问表单元素，但一旦它绑定到另一个
此
，您不能再访问它了。如果您使用委派事件，
event.target
是否保证正确？@Alnitak问得好，我不确定。但是使用
event.target
或
event.currentTarget
肯定有一个解决方法。您不能覆盖已
.bind
编辑的函数的
this
。您应该在外部分数中创建对类对象的额外引用（例如
var self=this
），将
this
留给jQuery使用，正如已经指出的那样，如果没有绑定，您将无法访问预期的
this
。但是，您可以使用
event.target
访问事件目标，从那里您应该可以执行几乎所有的操作。您可以通过
$（event.target）
访问表单元素，但一旦它绑定到另一个
此
，您不能再访问它了。如果您使用委派事件，
event.target
是否保证正确？@Alnitak问得好，我不确定。但是使用
event.target
或
event.currentTarget