jQuery OOP基础知识

我想开始开发jQuery游戏,因此我需要学习jQuery OOP。 我有一些(足够)使用C ++ OOP(开发一些游戏)的经验。

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

jQuery还有更高级的“选项”,比如C ++吗? (抽象类/对象,inheirtance等…)

你能解释一下吗? (或者给我一些好的javascript OOP教程的链接)。

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

我将向您展示两个,一个对象inheritance的实现和一个对象组合的实现。

这确实与jQuery完全无关。 jQuery应该用于DOM操作和事件操作。 您不应该基于jQuery对象创建核心对象和构造函数。 在游戏中,jQuery的角色是读取键盘输入并可选择将图形渲染到DOM中(如果由于某种原因你没有使用 )。

实例

遗产

 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 

这里定义了一个可以调用以创建新对象的Constructor函数。 用this引用构造函数中的对象。

您可以将(静态)方法和变量添加到将由对象inheritance的构造函数的原型中。

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

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

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

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

组成

使用原型实际上并不是必需的,您也可以使用对象组合。 这种方法确实需要很好地理解this状态,你可以在其他地方阅读。

我要作弊并将一些繁琐的帮助函数委托给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(); 

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

作为一个注释,我最近开始使用Processing.js ,它允许声明类C ++ – 就像使用’class’一样。

后期编辑(2014年6月):

Processing.js非常适合让项目继续进行而无需使用JavaScript OOP。 但是当我开始开发更大的项目时,我注意到Processing.js是一个过多的抽象层次,并且实际上值得自己编写OOP位和整个代码结构。

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

在所有编程语言中,OOP都是一样的。 C ++中的对象是类的实例,而类是完全编译时的构造。 Javascript没有类,它只有对象。

可以使用类似于类的方式使用Javascript,使用范围规则,原型链和特殊的“this”引用,但这些是强加于语言的惯用语,而不是语言的一部分。 并且有许多不同的阶级式习语,以及无数自我发明的习语。

在我看来,通过探索范围规则可以最好地理解javascript和C ++ / C#/ Java /等之间的关键差异。 代码中任何一点的变量范围,以及特殊“this”引用所指向的对象,何时,在尝试使用javascript时理解它是至关重要的。