Class methods in Javascript

Question

I'm trying to learn how to apply basic object oriented concepts to Javascript. Here, I just want to be able to create a class method, and then call the method externally when I click on an <input> element:

<html>
<head>
<script type="text/javascript">

var Foo = function()
{

}

Foo.prototype.bar = function() { alert("blah"); }

</script>
</head>

<body>
<input type="submit" onclick = "Foo.bar()">
</body>
</html>

This doesn't work. Firefox gives the error Error: Foo.bar is not a function

However, if I call Foo() directly, and then from within Foo I call this.bar(), it works fine. Why am I unable to invoke Foo.bar() externally?

Have you been though the W3C schools tutorial here: w3schools.com/js ? I've been programming Javascript since it was called LiveScript and I still reference this site. — Yzmir Ramirez
– Yzmir Ramirez, Commented Apr 10, 2011 at 2:54

David Tang · Accepted Answer · 2011-04-10 03:03:19Z

6

I think you're confusing so-called instance methods and class methods.

prototype is used to create instance methods, which belong to objects created from the prototype when used with the new keyword:

var foo = new Foo();
foo.bar(); // Will work

I'm not sure this is what you want. More likely you just want to add a static class method to Foo:

var Foo = {};
Foo.bar = function () { alert('blah'); };
Foo.bar(); // Will work

edited Apr 10, 2011 at 3:03

answered Apr 10, 2011 at 2:54

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

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

Comments

Mark Cidade · Accepted Answer · 2011-04-10 02:55:25Z

1

Instead of Foo.prototype.bar... just use Foo.bar = function() {...}, which will just add a bar member on the Foo function object.

To access any prototype or this.* members, you need an instance first: new Foo().bar().

answered Apr 10, 2011 at 2:55

Mark Cidade

100k33 gold badges231 silver badges238 bronze badges

Comments

user578895 · Accepted Answer · 2011-04-10 03:04:55Z

1

I wrote a few years back explains; it explains the ins-and-outs of JavaScript class structure:

http://www.htmlgoodies.com/primers/jsp/article.php/3600451/Javascript-Basics-Part-8.htm

answered Apr 10, 2011 at 3:04

user578895

Collectives™ on Stack Overflow

Class methods in Javascript

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related