JQuery .each() "this" keyword vs JS Class "this" keyword

Question

I am trying to add an .each() method to a JS class declaration. However, I think the two this keywords are conflicting. Attempts to return the class variable using this returns undefined.

class MyClass{
  constructor(parameterA, parameterB){
    this.parameterA = parameterA;
    this.myClassMethod = this.myClassMethod.bind(this);
  }

  myClassMethod(){
    $('.class').each(function(){
      console.log(this.parameterA); //Returns undefined
    }
  }

}

var test = MyClass(parameterA, parameterB);

It logs undefined because the anonymous each function is not bound to the class context. — idream1nC0de, Jul 08 '19 at 17:55
Well, `this` in the `each()` refers to the current item in the each loop, not the class `this` — Huangism, Jul 08 '19 at 17:58

score 0 · Answer 1 · answered Jul 08 '19 at 17:58

Try binding the each function to the class context.

class MyClass{
  constructor(parameterA, parameterB){
    this.parameterA = parameterA;
  }

  myClassMethod(){
    $('.class').each(function(){
      console.log(this.parameterA); // Should log 'a'
    }.bind(this));
  }

}

$(function() {
  const test = new MyClass('a', 'b');
  
  test.myClassMethod();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class">
</div>
<div class="class">
</div>
<div class="class">
</div>
<div class="class">
</div>
<div class="class">
</div>

JQuery .each() "this" keyword vs JS Class "this" keyword

1 Answers1