function as class in JavaScript

Question

I am trying to use something similar to Objects/Classes in JavaScript. I found out that this can be done via a function. So my class code is like this: (using jQuery)

function InfoBox(Box) { // My class
    this.Box = Box; // html element
    this.Text = 'Information here';
    this.Image = 'foo.png';

    setText = function () {
        this.Box.children('.Text').html(this.Text);
    }
}

The variables in the function work fine but whenever I call the method/function "setText" via

var iBoxUser = new InfoBox($('.iBoxUser'));
iBoxUser.Text = 'Welcome';
iBoxUser.setText(); // Error occurs here

I get the error: "Uncaught TypeError: undefined is not a function"

It seems that I'm somehow doing the function thing wrong. Or can functions even contain other functions?

juvian · Accepted Answer · 2014-06-10 17:51:55Z

6

Change

setText = function () {

To:

this.setText = function () {

Update: As comments say, you could also set the function outside your Infobox:

InfoBox.prototype.setText = function () {

edited Jun 10, 2014 at 17:51

answered Jun 10, 2014 at 17:46

juvian

16.1k2 gold badges42 silver badges40 bronze badges

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

3 Comments

Ismail Badawi Over a year ago

Better yet, move setText outside the function, and write InfoBox.prototype.setText =

Vinz Over a year ago

I am so stupid. Can you beleve that I was searching for the error for 3 days now? You saved my day! Thank you a lot!

juvian Over a year ago

@user2334932 happens to the best of us! Next time try to ask for help after just 1 day ;)

a-d · Accepted Answer · 2014-06-10 17:50:42Z

1

You are experiencing a scope problem, what you are doing here is that you set the global variable setText to a function expression (it may or may not exist at the moment you declare it). This kind of errors can be avoided by setting strict mode.

To expose setText as a method I suggest you to attach it to the prototype of InfoBox

function InfoBox(Box) { // My class
    this.Box = Box; // html element
    this.Text = 'Information here';
    this.Image = 'foo.png';
}

InfoBox.prototype.setText = function () {
    this.Box.children('.Text').html(this.Text);
}

answered Jun 10, 2014 at 17:50

a-d

10.9k2 gold badges34 silver badges50 bronze badges

1 Comment

Vinz Over a year ago

ok thank you. I've seen this prototype already but thought its a member of the function. Now I see that this is an internal member of every JS object. thx

Collectives™ on Stack Overflow

function as class in JavaScript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related