CODEWITHSUNDEEP
javascript
Anand From Pie.host
Anand From Pie.host

Reputation: 1233

How can I access two "this" in a javascript member function

Please have a look of the following code snippet,

I have a method someFunc of the Javascript class someClass

Inside the onclick handler of the btn variable inside the method definition, I want to get a reference to the SomeClass and the button both.

SomeClass.prototype.someFunc = function(){

    var btn = document.crealeElement("button");
    btn.onclick = function() {
       this.somePropertyOfSomeClass = true; //this works, because bind
       this.classList.add("active"); //this does not
    }.bind(this);
}

I know, if I use bind(this) then the this variable inside the click handler refers to SomeClass, and without bind, it refers to the button element.

My problem is: How to get both? Because I want to some properties of the class SomeClass inside the handler

Upvotes: 3

Views: 160

Answers (4)

Csaba Benko
Csaba Benko

Reputation: 1161

Something like this should work:

SomeClass.prototype.someFunc = function(){
    var that = this;

    var btn = document.crealeElement("button");
    btn.onclick = function() {
       that.somePropertyOfSomeClass = true; //references of SomeClass because of the closure
       this.classList.add("active"); //this should reference btn
    };
}

Also see @Dominic's post, that is an even better solution.

Upvotes: 1

nanobar
nanobar

Reputation: 66355

It's better and more modern practice to access the element (target) or current element the event is bubbling through (currentTarget). Using this is unclear inside a class for anything other than the class instance. Also it's better to use an event listener so multiple events can be attached of the same type.

SomeClass.prototype.someFunc = function(){
    const btn = document.crealeElement("button");
    btn.addEventListener('click', (event) => {
       this.somePropertyOfSomeClass = true; //this works, because arrow function has lexical scope
       event.target.classList.add("active"); // proper way to access the element
    }
}

Also you might want to take a look at ES6 classes.

Upvotes: 3

vinoth s
vinoth s

Reputation: 198

Replace this code this.classList.add("active"); to btn.setAttribute("class", "active");

 SomeClass.prototype.someFunc = function(){

    var btn = document.crealeElement("button");
    btn.onclick = function() {
       this.somePropertyOfSomeClass = true; //this works, because bind
      btn.setAttribute("class", "active"); //this may be help you
    }.bind(this);
}

Upvotes: 1

TheOneAndOnly Official
TheOneAndOnly Official

Reputation: 13

Just save the context in the outside function:

SomeClass.prototype.someFunc = function(){
   let _this = this;
   var btn = document.crealeElement("button");
   btn.onclick = function() {
      _this.somePropertyOfSomeClass = true; //saved context
      this.classList.add("active");
   }
}

Upvotes: 1

Related Questions