How Do I Create A Class In Javascript?

This is what I got so far, and it's not working at all :( all the variables are null in my player class and update never gets called. I mean a programming class, not a css class. I

Solution 1:

According to this article, there are three ways to define a class in JavaScript:

1 Using a function

Example:

 function Apple (type) {
     this.type = type;
     this.color = "red";
     this.getInfo = getAppleInfo;
 }

 function getAppleInfo() {
     returnthis.color + ' ' + this.type + ' apple';
 }


 var apple = new Apple('macintosh');
 apple.color = "reddish";
 alert(apple.getInfo());

2 Using JSON

var apple = {
     type: "macintosh",
     color: "red",
     getInfo: function () {
         returnthis.color + ' ' + this.type + ' apple';
     }
 }


 apple.color = "reddish";
 alert(apple.getInfo());

3 Singleton using a function

var apple = new function() {
     this.type = "macintosh";
     this.color = "red";
     this.getInfo = function () {
         returnthis.color + ' ' + this.type + ' apple';
     };
 }


 apple.color = "reddish";
 alert(apple.getInfo());

Solution 2:

The var makes a private variable, do prefix with this instead in your constructor:

        function Player () {
            this.speed = 5;
            this.x = 50;
            this.y = 50;
            var pri = 'private';
            this.update = function() {
                  if(keys[37]) this.x -= this.speed;
                  if(keys[39]) this.x += this.speed;
            }
        }

        var player = new Player;
        alert( player.speed ) // should alert 5
        alert( player.pri ) // should fail or say undefined

You can also do...

var player = {
           speed: 5,
           x:50,
           y:50,
           update: function() {
               // code
           }
      }

And then get rid of new Player and the Player constructor.

Solution 3:

You're using Player like a constructor, but it is not set up like one.

Rather than using var inside the constructor function, like var speed = 5; you need to use

this.speed=5;

Then it wil return an instance of Player. As it is, you're just setting some variables and returning nothing in particular.

Now, as far as learning JS object creation and inheritance, I suggest checking out Douglas Crockford's resources. As you may know, it's not intended to be class-based like Java, PHP, Python and so on. JavaScript has prototypal inheritance based on cloning objects that already exist.

Crockford discusses doing class-based inheritance in JS in this older article. The problem is, you're not using JS to it's best trying to do that. This treatise may be interesting where he explains one way of cloning objects. That is the Object.beget method, which is good, but has limits as well. The best way is the 'functional' method. Sorry for the PowerPoint links, but you should read this: http://www.crockford.com/codecamp/The%20Good%20Parts%20ppt/4%20prototypal.ppt and this: http://www.crockford.com/codecamp/The%20Good%20Parts%20ppt/5%20functional.ppt

http://video.yahoo.com/watch/630959/2974197 is one version of a video where Crockford discusses the ins and outs of JS. http://www.youtube.com/watch?v=hQVTIJBZook is another of the same.

I really recommend getting the book JavaScript: The Good Parts for a thorough run down of pragmatic advanced JavaScript.