THIS object in conflict between jQuery and ECMA6 class

Asked

Viewed 57 times

1

How to resolve the conflict between the this of a jQuery loop performed within a javascript class method (ECMA6)?

Example, the metodoUm loops using jQuery and for each loop iteration, calls the metodoDois passing the object of interaction as a parameter, so there are two this, one referring to the class Teste, and another referencing the element found in each iteration of the method .each.

class Teste{
    metodoUm(){
        $('input').each(function () {
            // $(this) adicionado para referenciar o jQuery
            this.metodoDois($(this)); 
        });
    }

    metodoDois(t){
        console.log(t);
    }
}
teste = new Teste();
teste.metodoUm();

Error presented:

TypeError: this.metodoDois is not a function(...).

How to resolve, or circumvent, this conflict?

Thanks for your help.

jquery ecmascript-6

  • @Samir Braga, Thanks for the help, indicating to use $(this), but is presenting the error: Typeerror: this.methodDois is not a Function(...).

3 answers

4


As you are already using ES6, you can make use of Arrow Functions to preserve reference to the this and solve this problem.

Example:

$('input').each((i, elemento) => {
    this.metodoDois($(elemento)); 
});

The above code would replace the code from within its function metodoUm().

About Arrow Functions

Arrow Functions are a novelty of ES6 that has as advantages a shorter syntax than the conventional function statement, in addition to preserving the value of the this (unlike the standard format).

function () {
    // declaração de função anônima convencional
}

() => {
    // Arrow Function
}

You can read more about her here

  • If in the . each location I wanted to use a change or keyup... how would I solve the THIS problem?

  • @Allanandrade The function .on() jQuery always returns a parameter with the event fired. That means you could still pick up the element from where the event went off without using the this jQuery. Example: $('input').on('keyup', (event) => { console.log(event.target) // input que sofreu o keyup });.

3

I believe that in this case the ideal would be to use a variable to store the reference to this class

class Teste{
    metodoUm(){
        var _this = this;
        $('input').each(function () {
            // $(this) adicionado para referenciar o jQuery
            _this.metodoDois($(this)); 
        });
    }

    metodoDois(t){
        console.log(t);
    }
}
teste = new Teste();
teste.metodoUm();

1

You could call your own class Teste(), and for the selection of this inside the loop could use $(this):

class Teste {
  metodoUm() {
    $('input').each(function() {
      teste.metodoDois($(this));
    });
  }
  metodoDois(t) {
    console.log(t);
  }
}
teste = new Teste();
teste.metodoUm();

  • thanks for the help, I’m starting with ECMA6... so wouldn’t be creating an instance for each loop item? That wouldn’t compromise performance?

  • @Allanandrade, I’m also starting with ECMA6, rsrs. But I think you’re right, in this case you can use the variable already declared. Since I would not create new instances with each repetition, I would use only one already created. I will update the answer,

Browser other questions tagged jquery ecmascript-6

You are not signed in. Login or sign up in order to post.