jQuery OOP 基础

jQuery OOP basics

提问by XCS

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).

我想开始开发jQuery游戏，因此我需要学习jQuery OOP。我有一些（足够）的 C++ OOP 经验（开发了一些游戏）。

I know that I can replace the C++ "class" with jQuery "objects" but I don't know how exactly that works.

我知道我可以用 jQuery“对象”替换 C++“类”，但我不知道它究竟是如何工作的。

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

jQuery 是否还有更高级的“选项”，比如 C++？（抽象类/对象、继承等...）

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

你们能帮我解释一下吗？（或者给我一些好的 javascript OOP 教程的链接）。

回答by Raynos

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

JavaScript 中的 OOP 编程可以通过多种方式完成。周围有很多图案。

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).

这与 jQuery 完全没有关系。jQuery 应该用于 DOM 操作和事件操作。你不应该基于 jQuery 对象创建你的核心对象和构造函数。在游戏中 jQuery 的作用是读取键盘输入并有选择地将您的图形渲染到 DOM 中（如果您<canvas>由于某种原因没有使用）。

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 Constructorfunction that you can call to create a new object. You refer to the object inside the constructor with this.

这里定义了一个Constructor函数，你可以调用它来创建一个新对象。您使用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 inheritsfunction 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

您可以使用将inherits构造函数的原型设置为不同构造函数的实例的函数。这意味着该父对象的所有方法和属性在子对象上都可用

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.

这是 JavaScript 的原型继承。基本上，您将函数的原型设置为特定对象。然后，当您使用该函数创建对象时，这些对象实现了原型。

Composition

作品

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

使用原型实际上并不是必需的，您也可以使用对象组合来代替。这种方法确实需要对this状态有很好的理解，您可以在别处阅读有关内容。

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

我将欺骗并将一些乏味的辅助函数委托给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 thison all the methods of that constructor object so that we can delegate the call to mymethodto our own constructor object. This only works for methods but that shouldn't be an issue because you really shouldn't have public fields.

这里 SecondConstructor 为自己创建了一个 Constructor 的实例，而不是从它继承。然后它绑定该this构造函数对象的所有方法的引用，以便我们可以将调用委托mymethod给我们自己的构造函数对象。这仅适用于方法，但这应该不是问题，因为您确实不应该拥有公共字段。

回答by Jeff Dege

OOP is very much notthe 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.

OOP在所有编程语言中都不尽相同。C++ 中的对象是类的实例，而类是完全编译时的构造。Javascript 没有类，它只有对象。

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.

可以以类似于类的方式使用 Javascript，使用范围规则、原型链和特殊的“this”引用，但这些是强加于语言的习语，而不是语言的一部分。并且有很多不同的类风格习语被普遍使用，还有无数自创的习语。

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.

在我看来，通过探索范围规则可以最好地理解 javascript 和 C++/C#/Java/等之间的关键区别。什么变量在代码中的任何一点都在范围内，特殊的“this”引用指向什么对象，什么时候，是在尝试使用 javascript 时理解的关键。

回答by XCS

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

请注意，我最近开始使用Processing.js，它允许声明类 C++ - 就像，只需使用 'class' 。

Later Edit (June 2014):

后来编辑（2014 年 6 月）：

Processing.js was good for getting projects going without having to fightwith 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.

Processing.js 非常适合让项目运行，而不必与 JavaScript OOP斗争。但是当我开始开发更大的项目时，我注意到 Processing.js 是一个过于抽象的级别，实际上值得自己编写 OOP 位和整个代码结构。

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

我现在使用PIXI.js作为我的画布渲染器/交互库，并使用上面提到的一些 OOP 技巧以更清晰的方式构建我的代码。