Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

208
Visualizações
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" with 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).

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

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.

over 4 years ago · Santiago Trujillo Relatório

0

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.

over 4 years ago · Santiago Trujillo Relatório

0

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.

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda