Pass function to javascript class

Question

On my index.html, I have this code,

$(document).ready(function() {
    var self = this;
    var submit = function() {
        alert("Test");
    }
    const form = new Form(self.submit);
})

In my Form.js, I have this code,

class Form() {
    constructor(func) {
        var self = this;
        // ...
        $("submitBtn").click(function(e) {
           e.preventDefault();
           self.func();
        });
        // ...
    }
}

Why my function is not executing after the submitBtn is clicked? I used self to get the "this" value. I cant use "new Form(self.submit())" because It will execute the function once the line is read.

Well, you do pass "func" to your constructor, but then you do nothing with it... Is this your whole code, or did you remove parts of it? — nibnut
– nibnut, Commented Jan 30, 2017 at 21:14
you haven't bound submit to anything, just pass an anonymous function to the constructor — Daniel Lizik
– Daniel Lizik, Commented Jan 30, 2017 at 21:14

Pointy · Accepted Answer · 2017-01-30 21:14:33Z

3

Your submit function is a local variable, not a property of this. Thus you need:

const form = new Form(submit);

Similarly, in your constructor, func doesn't have anything to do with self; it should just be

  func();

answered Jan 30, 2017 at 21:14

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:16:59Z

1

Pointy answers the question. I just want to add that constructor is a place where you usually declare and initialize instance properties, and it's better to register click event in a class method, something like:

class Form{
  constructor(){}
  click(func){
     $("submitBtn").click((e)=>{
           e.preventDefault();
           func();
        });
  }

}

Also you dont need to cache the scope var self = this as long as you use arrow function. This answer could be useful Advantages of using prototype, vs defining methods straight in the constructor?

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Jan 30, 2017 at 21:30

andrey

1,9973 gold badges23 silver badges35 bronze badges

Collectives™ on Stack Overflow

Pass function to javascript class

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related