使用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()