jQuery OOP basics

I want to start developing jQuery games, thus I need to learn jQuery OOP. I have some (enough) experience with C++ OOP (developed some games).

I know that I can replace the C++ "class" w开发者_C百科ith jQuery "objects" but I don't know how exactly that works.

Also does jQuery have more advanced "options" like C++ ? (abstract classes/objects, inheirtance, etc... )

Can you guys explain that to me? (or give me the link to some good javascript OOP tutorials).

OOP programming in JavaScript can be done in many ways. There are a lot of patterns around.

I will show you two, an Implementation of object inheritance and an implementation of object composition.

This does have absolutely nothing to do with jQuery. jQuery should be used for DOM manipulation and event manipulation. You shouldn't make your core objects and constructors based on jQuery objects. In a game jQuery's role is reading keyboard input and optionally rendering your graphics into the DOM (If you're not using the <canvas> for some reason).

Live example

Inheritance

var Constructor = function(name) {
    this.name = name
};

Constructor.prototype.mymethod = function() {
    alert("my name is : " + this.name);
};

var obj = new Constructor("foo");
obj.mymethod(); // my name is : foo

Here were defining a Constructor function that you can call to create a new object. You refer to the object inside the constructor with this.

You can add (static) methods and variables to the prototype of the Constructor that will be inherited by the object.

function inherits(child, parent) {
    var f = new Function;
    f.prototype = parent.prototype;
    f.prototype.constructor = parent;
    child.prototype = new f;
    child.prototype.constructor = child;
}

You may use an inherits function which set's the prototype of a constructor function to an instance of a different constructor. This means that all the methods and properties of that parent object are available on the child

var SecondConstructor = function(name) {
    this.name = name + "bar";
};
inherits(SecondConstructor, Constructor);
var obj = new SecondConstructor("foo");
obj.mymethod(); // my name is : foobar

This is JavaScripts prototypical inheritance. Basically you set the prototype of a function to a particular object. Then when you use the function to create objects those objects implement the prototype.

Composition

Using the prototype isn't actually neccesary you can also use object composition instead. This method does require a good understanding of the this state which you can read about elsewhere.

I'm going to cheat and delegate some of the tedious helper functions to underscore.js

var Constructor = function(name) {
    this.name = name;

    this.mymethod = function() {
        alert("my name is : " + this.name);
    };
};

var SecondConstructor = function(name) {
    var constructor = new Constructor(name + "bar");
    _.bindAll(constructor);
    _.extend(this, {
        "mymethod": constructor.mymethod
    });
};

var obj = new SecondConstructor("foo");
obj.mymethod();

Here the SecondConstructor creates an instance of Constructor for itself rather then inheriting from it. It then binds the reference of this on all the methods of that constructor object so that we can delegate the call to mymethod to our own constructor object. This only works for methods but that shouldn't be an issue because you really shouldn't have public fields.

OOP is very much not the same in all programming languages. Objects in C++ are instances of classes, and classes are an entirely compile-time construct. Javascript doesn't have classes, all it has are objects.

It is possible to use Javascript in ways that act similarly to classes, using scoping rules, prototype chains and the special "this" reference, but these are idioms that are imposed on the language, not part of the language. And there are quite a few different class-style idioms in common use, and untold numbers of self-invented ones.

In my mind, the critical differences between javascript and C++/C#/Java/etc., are best understood by exploring the scoping rules. What variables are in scope at any point in the code, and what object the special "this" reference is pointing to, when, are what it is critical to understand, when trying to work with javascript.

As a note, I've recently started using Processing.js which allows the declaration of classes C++ - like, simply using 'class' .

Later Edit (June 2014):

Processing.js was good for getting projects going without having to fight with JavaScript OOP. But as I started developing larger projects I noticed that Processing.js is a level too much of abstractization and that it is actually worth writing the OOP bits and whole code structure by yourself.

I am now using PIXI.js as my canvas renderer/interaction library and structure my code in a much more cleaner way using some of the OOP tricks mentioned above.