CODEWITHSUNDEEP
javascriptclass
JosephGarrone
JosephGarrone

Reputation: 4161

Mimicing classes in Javascript

I am attempting to make my life in Javascript a little bit easier (At least for my work environment). I am attempting to move all my Javascript object creation methods into a "class". I have the following code (To create a hyperlink):

function QuickDOM()
{
   this.createElement = function(tag)
   {
       var element;
       if (tag === undefined || typeof tag != 'string')
       {
           element = document.createElement("div");
       }
       else
       {
           element = document.createElement(tag);
       }
       return element;
    };

    this.A = function(hyperlink, content)
    {
       var element = QuickDOM.createElement("a");
       element.setAttribute("href", hyperlink);
       element.innerHTML = content;
       return element;
    };
}

Is this the correct way to go about mimicing a "class" in Javascript? I currently get the following error in Chrome whilst executing new QuickDOM().A("www.google.com", "Google");

Uncaught TypeError: Object function QuickDOM()

Can anyone offer me any suggestions as to why this is not working.

NOTE: I was using this as a guide.

Upvotes: 0

Views: 36

Answers (3)

Guffa
Guffa

Reputation: 700342

In your A method you are using the function instead of an instance of the object. This code:

var element = QuickDOM.createElement("a");

would be using the instance that you are in:

var element = this.createElement("a");

However, as you don't have any use for more than one instance of that object, you should just create an object instead of having a constructor function:

var QuickDOM = {
   createElement: function(tag)
   {
       var element;
       if (tag === undefined || typeof tag != 'string')
       {
           element = document.createElement("div");
       }
       else
       {
           element = document.createElement(tag);
       }
       return element;
    },

    A: function(hyperlink, content)
    {
       var element = this.createElement("a");
       element.setAttribute("href", hyperlink);
       element.innerHTML = content;
       return element;
    }
}

Now you would just use the object to call the methods:

var link = QuickDOM.A("www.google.com", "Google");

Upvotes: 1

Michał Dudak
Michał Dudak

Reputation: 5048

To use createElement or A you have to create an instance of QuickDOM:

var quickDOM = new QuickDOM();
var element = quickDOM.createElement("a");

In your A method you should use this instead of QuickDOM:

var element = this.createElement("a");

Upvotes: 1

alex
alex

Reputation: 490263

You're adding instance methods and then attempting to access them statically within your code.

Try replacing QuickDOM.createElement("a") with this.createElement("a").

Also, the way you're assigning instance methods is generally considered bad practice. I could see some merit if you were doing it that way to have private variables, but seeing as you're not, you may want to make those methods exist on the prototype instead.

Upvotes: 1

Related Questions