JavaScript 中的 OOP 编程可以通过多种方式完成。周围有很多模式。
我将向您展示两个,对象继承的实现和对象组合的实现。
这确实与 jQuery 无关。 jQuery 应该用于 DOM 操作和事件操作。你不应该让你的核心对象和构造函数基于 jQuery 对象。在游戏中,jQuery 的作用是读取键盘输入并选择性地将图形渲染到 DOM 中(如果由于某种原因你没有使用 <canvas>)。
Live example
继承
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 引用构造函数内的对象。
您可以将(静态)方法和变量添加到将由对象继承的构造函数的原型中。
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
这是 JavaScript 的原型继承。基本上,您将函数的原型设置为特定对象。然后,当您使用该函数创建对象时,这些对象将实现原型。
作曲
实际上并不需要使用原型,您也可以使用对象组合来代替。这种方法确实需要很好地理解this 状态,您可以阅读有关elsewhere 的信息。
我要作弊并将一些乏味的辅助函数委托给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 实例,而不是从它继承。然后它将this 的引用绑定到该构造函数对象的所有方法上,以便我们可以将对mymethod 的调用委托给我们自己的构造函数对象。这仅适用于方法,但这不应该成为问题,因为您确实不应该拥有公共字段。