Javascript "this" 在 jquery 事件中

Javascript "this" in a jquery event

如何在 Jquery 更改函数中正确调用 functionOne? "this" 不再引用该对象。

NameSpace.object = {
  functionOne: function(){
     // stuff
  },
  functionTwo: function(){
     this.functionOne();  // this works correctly
  },
  functionThree: function(){
    $('input').change(function(){
       if ( $(this).val() > 1) {
         this.functionOne(); // this is no longer calling function one 
       }
    }
  }
}

一种方法是保留对它的引用,通常称为self

NameSpace.object = {
  functionOne: function(){
     // stuff
  },
  functionTwo: function(){
     this.functionOne();  // this works correctly
  },
  functionThree: function(){
    var self = this;
    $('input').change(function(){
       if ( $(this).val() > 1) {
         self.functionOne(); // this is no longer calling function one 
       }
    }
  }
}

在正常情况下,您可以 bind 使用 this 回调您的对象。但在这种情况下,我不知道它如何与 jquery 覆盖 this 交互以引用触发回调的元素...

由于您有两个不同的值要使用,并且 jQuery 已经将其中一个放入 this,您可以将另一个值保存在更高范围的变量中:

NameSpace.object = {
  functionOne: function(){
     // stuff
  },
  functionTwo: function(){
     this.functionOne();  // this works correctly
  },
  functionThree: function(){
    // save value if this so it can be used later in this scope
    var self = this;
    $('input').change(function(){
       if ( $(this).val() > 1) {
         self.functionOne();
       }
    }
  }
}

或者,由于这是静态命名的 NameSpace.object,您也可以直接引用该名称:

NameSpace.object = {
  functionOne: function(){
     // stuff
  },
  functionTwo: function(){
     this.functionOne();  // this works correctly
  },
  functionThree: function(){
    $('input').change(function(){
       if ( $(this).val() > 1) {
         NameSpace.object.functionOne();
       }
    }
  }
}

或者,由于 jQuery 提供了一种机制 .change( [eventData], handler ) 用于将数据传递给事件处理程序,您也可以使用它:

NameSpace.object = {
  functionOne: function(){
     // stuff
  },
  functionTwo: function(){
     this.functionOne();  // this works correctly
  },
  functionThree: function(){
    $('input').change(this, function(e){
       if ( $(this).val() > 1) {
         e.data.functionOne();
       }
    }
  }
}

jQuery 机制在这里不是我最喜欢的,因为我认为调用 e.data.functionOne() 的代码不太明显( reader 必须回顾代码才能弄清楚是什么e.data 是),但这只是我个人对这种情况的看法。

尝试在 functionThree 中设置 NameSpace 的变量,调用 NameSpace.object.functionThree()input 元素

设置 change 事件

var NameSpace = {};
NameSpace.object = {
  functionOne: function(){
     // stuff
     alert("functionOne")
  },
  functionTwo: function(){
     this.functionOne();  // this works correctly
  },
  functionThree: function(){
    var ns = this;
    $('input').change(function(){
       if ( $(this).val() > 1) {
        ns.functionOne(); // this is no longer calling function one 
       }
    })
  }
}

NameSpace.object.functionThree()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" />

您还可以使用 jQuery.change([eventData ],...) 的可选 eventData 参数。

通过将 this 传递给 eventData,您可以通过事件变量从处理程序内部访问它。

$('input').change(<b>this</b>,function(<b>e</b>){
    ...
    <b>e.data</b>.functionOne(); 
    ...
}

var NameSpace = {};
NameSpace.object = {
  functionOne: function(){
     // stuff
     alert("functionOne")
  },
  functionTwo: function(){
     this.functionOne();  // this works correctly
  },
  functionThree: function(){
    $('input').change(this,function(e){
       if ( $(this).val() > 1) {
         e.data.functionOne();  
       }
    })
  }
}

NameSpace.object.functionThree()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" />