How to access to $(this) when bind(this) is used?

bind javascript
javascript bind event
"typescript" bind
this in javascript
bind javascript w3schools
javascript this inside function
javascript bind parameters to callback function
bind es6

Suppose I have a form attached to the following javascript function:

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

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

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

now the main problem is that the submit function attached to #foo is available inside a class which contains other functions, eg: validate:

Helper.prototype.validate = function()
{
    // some content
}

I need to access to those functions using this, so I attached at the end of the submit the code: bind(this) and I'm able to invoke the validate function of Helper class simply using this.validate.

The scenario above will cause some issue on the $(this) parameter, infact if I try to access to the action of the form, then I'll get an empty string because javascript will search the variable action inside the class Helper.

If I remove bind(this) I can access to the action of the form, but I'll lose the access to validate function.

Someone have an idea to fix this?

The generic structure of the js file is this:

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

You can't.

The entire point of bind is that you replace the value of this.

If you want to have access to this and another value, then don't use bind. Store the value in a different variable. Consider an IIFE instead:

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

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

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

You might want to split it up to make it less unwieldy:

function thingy_factory(context) {
  function thingy(event) {
    event.preventDefault();
    if (!context.validate()) {
      return;
    }

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

and

$('#foo').submit(thingy_factory(this));

this, ES5 introduced the bind() method to set the value of a function's this Note: You can always easily get the global object using the global globalThis whose // members are used as the arguments in the function call add.apply(o, [10, 20]); // 34. The solution is the same as mentioned above: If available, use .bind to explicitly bind this to a specific value document.body.onclick = this.method.bind(this); or explicitly call the function as a "method" of the object, by using an anonymous function as callback / event handler and assign the object ( this ) to another variable:


I would say instead of relying on the keyword this, just set up a reference to the current value of this outside of the jQuery callback.

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

I moved Helper.prototype.validate out of the the bindEventHandlers, I'm assuming that's what your intention is. Might have just been a formatting error.

Function.prototype.bind(), The bind() method creates a new function that, when called, has its this Generally, in most code it's very rare to see new used on a bound caller and arguments properties that throw a TypeError upon get, set, or deletion. The bind method. ECMAScript 5 introduced Function.prototype.bind(). Calling f.bind(someObject) creates a new function with the same body and scope as f, but where this occurs in the original function, in the new function it is permanently bound to the first argument of bind, regardless of how the function is being used.


Before of $('#foo').submit you can add var that = this; and validate function will be called in this way: that.validate()

6 Ways to Bind JavaScript's this Keyword in React, ES6 & ES7 , Dan Prince compares 6 different methods for binding the value of the this keyword in react You're probably used to seeing code like this inside React components. Get 'PHP & MySQL: Novice to Ninja, 6th Edition' for free. Thus, presented below are two options for Function.prototype.bind() polyfills: The first one is much smaller and more performant, but does not work when using the new operator. The second one is bigger and less performant, but it permits some usage of the new operator on bound functions.


Understanding this and .bind(), He can now execute his function on the student and has access to the ThisBinding is used by JavaScript's interpreter to keep track of context. Use the Form tool to create a new form. In the Navigation Pane, click the table or query that contains the data you want to see on your form. On the Create tab, in the Forms group, click Form. Access creates the form and displays it in Layout view.


Function binding, js, this becomes the timer object, but doesn't really matter here). So for this.​firstName it tries to get window.firstName , which does not exist. In  A convenient way to access XML data that is the binding source in markup is to use an XmlDataProvider object. For more information, see Bind to XML Data Using an XMLDataProvider and XPath Queries . You can also bind to an XElement or XDocument , or bind to the results of queries run on objects of these types by using LINQ to XML.


This is why we need to bind event handlers in Class Components in , But when we assign this function reference to some other variable and invoke the function using this new function reference, we get a different  Use the following procedure to bind a control to a field. Display the property sheet for the control by clicking the control, and then pressing F4. On the Data tab of the property sheet, click the drop-down arrow next to the Control Source property and select the field you want displayed in the control.