How to define your own JavaScript class

There are several ways to define a class in Javascript. I will be listing my favorite method below (JSON Method). It's important to note that there are no real classes in JavaScript. Everything is considered an object. So below is our class definition:

<script type="text/javascript">
var Person = {
    age: "25",
    sex: "Male",
    location: "New York",
    getASL: function () {
        return 'Age: ' + this.age + ', Sex: ' + this.sex + ', Location: ' + this.location;
    }
};
</script>

So you can start using the class like this:

<script type="text/javascript">
Person.age = "29";
alert(Person.getASL());
</script>

7 comments for How to define your own JavaScript class

Doug's picture

This was very helpful....

This was very helpful.

Joseph Montanez's picture

Actually thats an object. If...

Actually thats an object. If you ever do new Person(), its ignored and your just copied the object. So what doesn't work is if try to prototype Person so what every existing object of Person will also be extended with the new function / variable.

so it should be:


var Person = function() {
this.age = "25"
this.getASL = function() {
// stuff here
}
}

or


function Person() {
this.age = "25"
//etc
}
Person.prototype.getASL() = function () {
// stuff here
}

Its an anal comment but still something nice to know.

Richard's picture

Thanks!...

Thanks!

Pomax's picture

and how does one define a...

and how does one define a function with input? How would one, for instance, define a setAge(var age) function for Person, so we can say


var person = new Person();
person.setAge(23);
alert("person's age: "+person.getAge());

M A Hossain Tonu's picture

If you interested on JSON...

If you interested on JSON style JavaScript class declaration talks in more detail...

http://mahtonu.wordpress.com/2010/04/13/json-style-javascript-object-dec...

M A Hossain Tonu's picture

Nice post Actually JSON...

Nice post Smile

Actually JSON objects are singleton objects by design, not by choice, since they have no constructor. I really like JSON Laughing out loud

So using the JSON you can define a class, while at the same time creating an instance (object) of that class, means that you can have only one single instance of this class at any time, you cannot instantiate more objects of the same class.

More here:
http://mahtonu.wordpress.com/2010/04/13/json-style-javascript-object-dec...

Derrick's picture

Actually, Joseph Montanez,...

Actually, Joseph Montanez, you never want to do (or suggest) what you've done in your first example.

You are redefining the prototype methods each and every time a new instance of the class is instantiated.

Have a look here:
http://ejohn.org/blog/simple-class-instantiation/

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.