在 jQuery 内调用 class 方法 function

Question

So I have some javascript class and in one method I use jQuery to bind function to click event. And within this function I need to call other methods of this class. In usual js function I did it through "this.method_name()" , but here, I guess, jQuery redefines "this" pointer.

Answer 1

jQuery doesn't redefine the this pointer, but that's how JavaScript functions work in general. Store a reference to the this pointer under a different name, and use that.

var self = this;
$("selector").click(function() {
    self.method_name();
});

See this answer for more approaches.

Answer 2

There are a few different ways to do this.

Anurag has a perfect example of one.

Two other ways are the jQuery Proxy class (Mentioned in other answers) and the 'apply' function

Now lets create an object with click events:

var MyObj = function(){

this.property1 = "StringProp";

// jQuery Proxy Function
$(".selector").click($.proxy(function(){

  //Will alert "StringProp"
  alert(this.property1);
// set the 'this' object in the function to the MyObj instance


},this));


//Apply Function
//args are optional
this.clickFunction = function(arg1){
    alert(this.property1);
};

$(".selector").click(this.clickFunction.apply(this,"this is optional"));


};

Answer 3

In addition to the possibility of temporarily storing a reference to this ( self = this , see Anurag's answer), since ES6 it is possible to use arrow functions for this problem. These have no "own" this . This means that the "usual" object-related this can be accessed again within an arrow function within an event handler:

$("selector").click(() => {
    this.method_name();
});

Further information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions?retiredLocale=de#cannot_be_used_as_methods

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions?retiredLocale=de#using_call_bind_and_apply