在 JavaScript 中实现类和实例有两种模型:原型方式和闭包方式。两者都有优点和缺点,并且有很多扩展的变化。许多程序员和库有不同的方法和类处理实用程序函数来掩盖该语言的某些丑陋部分。
结果是,在混合公司中,您将拥有一堆杂乱无章的元类,它们的行为都略有不同。更糟糕的是,大多数 JavaScript 教程材料都很糟糕,并且提供了某种中间妥协来涵盖所有基础,让你非常困惑。 (可能作者也很困惑。JavaScript 的对象模型与大多数编程语言有很大不同,而且在很多地方直接设计得很糟糕。)
让我们从原型方式开始。这是您可以获得的最原生的 JavaScript:代码开销最少,instanceof 可以处理此类对象的实例。
function Shape(x, y) {
this.x= x;
this.y= y;
}
我们可以将方法添加到new Shape 创建的实例中,方法是将它们写入此构造函数的prototype 查找:
Shape.prototype.toString= function() {
return 'Shape at '+this.x+', '+this.y;
};
现在对它进行子类化,尽可能多地调用 JavaScript 进行子类化。我们通过完全替换那个奇怪的魔法prototype 属性来做到这一点:
function Circle(x, y, r) {
Shape.call(this, x, y); // invoke the base class's constructor function to take co-ords
this.r= r;
}
Circle.prototype= new Shape();
在向其添加方法之前:
Circle.prototype.toString= function() {
return 'Circular '+Shape.prototype.toString.call(this)+' with radius '+this.r;
}
这个例子可以工作,你会在很多教程中看到类似的代码。但是,伙计,new Shape() 很难看:我们正在实例化基类,即使没有创建实际的 Shape。它恰好在这种简单的情况下工作,因为 JavaScript 太草率了:它允许传入零个参数,在这种情况下 x 和 y 变为 undefined 并分配给原型的 this.x 和 this.y .如果构造函数做了更复杂的事情,它就会一头雾水。
所以我们需要做的是找到一种方法来创建一个原型对象,其中包含我们在类级别想要的方法和其他成员,而无需调用基类的构造函数。为此,我们将不得不开始编写帮助代码。这是我所知道的最简单的方法:
function subclassOf(base) {
_subclassOf.prototype= base.prototype;
return new _subclassOf();
}
function _subclassOf() {};
这会将基类原型中的成员转移到一个新的构造函数,该构造函数什么都不做,然后使用该构造函数。现在我们可以简单地写:
function Circle(x, y, r) {
Shape.call(this, x, y);
this.r= r;
}
Circle.prototype= subclassOf(Shape);
而不是new Shape() 错误。我们现在有了一组可接受的构建类的原语。
我们可以在此模型下考虑一些改进和扩展。例如这里是一个语法糖版本:
Function.prototype.subclass= function(base) {
var c= Function.prototype.subclass.nonconstructor;
c.prototype= base.prototype;
this.prototype= new c();
};
Function.prototype.subclass.nonconstructor= function() {};
...
function Circle(x, y, r) {
Shape.call(this, x, y);
this.r= r;
}
Circle.subclass(Shape);
任何一个版本都存在构造函数不能被继承的缺点,就像在许多语言中一样。因此,即使您的子类在构造过程中没有添加任何内容,它也必须记住使用基所需的任何参数调用基构造函数。这可以使用apply 稍微自动化,但您仍然必须写出:
function Point() {
Shape.apply(this, arguments);
}
Point.subclass(Shape);
所以一个常见的扩展是将初始化的东西分解成它自己的函数而不是构造函数本身。然后这个函数就可以从基类继承就好了:
function Shape() { this._init.apply(this, arguments); }
Shape.prototype._init= function(x, y) {
this.x= x;
this.y= y;
};
function Point() { this._init.apply(this, arguments); }
Point.subclass(Shape);
// no need to write new initialiser for Point!
现在我们刚刚为每个类获得了相同的构造函数样板。也许我们可以把它移到它自己的辅助函数中,这样我们就不必继续输入它了,例如代替Function.prototype.subclass,把它转过来让基类的函数吐出子类:
Function.prototype.makeSubclass= function() {
function Class() {
if ('_init' in this)
this._init.apply(this, arguments);
}
Function.prototype.makeSubclass.nonconstructor.prototype= this.prototype;
Class.prototype= new Function.prototype.makeSubclass.nonconstructor();
return Class;
};
Function.prototype.makeSubclass.nonconstructor= function() {};
...
Shape= Object.makeSubclass();
Shape.prototype._init= function(x, y) {
this.x= x;
this.y= y;
};
Point= Shape.makeSubclass();
Circle= Shape.makeSubclass();
Circle.prototype._init= function(x, y, r) {
Shape.prototype._init.call(this, x, y);
this.r= r;
};
...它开始看起来有点像其他语言,尽管语法稍显笨拙。如果您愿意,可以添加一些额外的功能。也许您希望makeSubclass 获取并记住一个类名,并使用它提供一个默认的toString。也许您想让构造函数检测它何时在没有 new 运算符的情况下被意外调用(否则通常会导致非常烦人的调试):
Function.prototype.makeSubclass= function() {
function Class() {
if (!(this instanceof Class))
throw('Constructor called without "new"');
...
也许您想传递所有新成员并让makeSubclass 将它们添加到原型中,以节省您编写Class.prototype... 的时间。很多类系统都是这样做的,例如:
Circle= Shape.makeSubclass({
_init: function(x, y, z) {
Shape.prototype._init.call(this, x, y);
this.r= r;
},
...
});
在一个对象系统中有很多您可能认为需要的潜在功能,但没有人真正同意一个特定的公式。
关闭方式,然后。这避免了 JavaScript 基于原型的继承问题,根本不使用继承。而是:
function Shape(x, y) {
var that= this;
this.x= x;
this.y= y;
this.toString= function() {
return 'Shape at '+that.x+', '+that.y;
};
}
function Circle(x, y, r) {
var that= this;
Shape.call(this, x, y);
this.r= r;
var _baseToString= this.toString;
this.toString= function() {
return 'Circular '+_baseToString(that)+' with radius '+that.r;
};
};
var mycircle= new Circle();
现在Shape 的每个实例都将拥有自己的toString 方法(以及我们添加的任何其他方法或其他类成员)的副本。
每个实例都有自己的每个类成员的副本的坏处是效率较低。如果您正在处理大量子类实例,原型继承可能会更好地为您服务。正如你所看到的,调用基类的方法也有点烦人:我们必须记住在子类构造函数覆盖它之前该方法是什么,否则它会丢失。
[也因为这里没有继承,instanceof操作符不起作用;如果需要,您必须提供自己的类嗅探机制。虽然您可以以与原型继承类似的方式来处理原型对象,但这有点棘手,而且不值得仅仅让instanceof 工作。]
每个实例都有自己的方法的好处是该方法可以绑定到拥有它的特定实例。这很有用,因为 JavaScript 在方法调用中绑定 this 的奇怪方式,如果你从它的所有者分离一个方法:
var ts= mycircle.toString;
alert(ts());
然后方法中的this 将不会是预期的Circle 实例(它实际上是全局window 对象,导致广泛的调试问题)。实际上,这通常发生在采用方法并将其分配给一般的setTimeout、onclick 或EventListener 时。
使用原型方式,您必须为每个此类分配包含一个闭包:
setTimeout(function() {
mycircle.move(1, 1);
}, 1000);
或者,在未来(或者现在,如果你破解 Function.prototype)你也可以使用function.bind():
setTimeout(mycircle.move.bind(mycircle, 1, 1), 1000);
如果您的实例以闭包方式完成,则绑定是通过实例变量上的闭包免费完成的(通常称为that 或self,尽管我个人建议不要使用后者,因为self 已经有了另一个,在 JavaScript 中的不同含义)。但是,您无法免费获得上述 sn-p 中的参数 1, 1,因此如果需要,您仍然需要另一个闭包或 bind()。
闭包方法也有很多变体。您可能更愿意完全省略 this,创建一个新的 that 并返回它,而不是使用 new 运算符:
function Shape(x, y) {
var that= {};
that.x= x;
that.y= y;
that.toString= function() {
return 'Shape at '+that.x+', '+that.y;
};
return that;
}
function Circle(x, y, r) {
var that= Shape(x, y);
that.r= r;
var _baseToString= that.toString;
that.toString= function() {
return 'Circular '+_baseToString(that)+' with radius '+r;
};
return that;
};
var mycircle= Circle(); // you can include `new` if you want but it won't do anything
哪种方式是“正确的”?两个都。哪个是“最好的”?这取决于你的情况。 FWIW 当我在做强 OO 的东西时,我倾向于为真正的 JavaScript 继承进行原型设计,并为简单的一次性页面效果使用闭包。
但是对于大多数程序员来说,这两种方式都非常违反直觉。两者都有许多潜在的混乱变化。如果您使用其他人的代码/库,您将同时遇到这两个(以及许多中间和通常损坏的方案)。没有一个普遍接受的答案。欢迎来到 JavaScript 对象的奇妙世界。
[这是为什么 JavaScript 不是我最喜欢的编程语言的第 94 部分。]