var ThingA = function(name) { this.name = name; }; ThingA.prototype = { sayHi: function() { alert('Hi,' + this.name + '!'); } }; var ThingB = function() { ThingA.call(this,'Charlie'); }; ThingB.prototype = new ThingA(); ThingB.prototype.constructor = ThingB; var instanceOfB = new ThingB(); instanceOfB.sayHi(); // alerts 'Hi,Charlie!'
由于我无法控制的原因,我的公司更喜欢在编写JavaScript时遵循这种模式:
SomeClass = function() { // "Private" functions go here function somePrivateMethod() { ... } return { // "Public" methods go here somePublicmethod: function() { ... } }; }();
现在,就事情而言,这是很好的,而且在很多情况下也是很好的.但它更是一种功能性的风格.只有一个“类”实例,一切都是静态的.
我被要求修改我的工作代码,更符合我公司喜欢的风格.所以我的问题是,有没有办法继承一个包装在工厂类中的类?它看起来像这样:
FactoryClassA = function() { var ThingA = function(name) { this.name = name; }; ThingA.prototype = { sayHi: function() { alert('Hi,' + this.name + '!'); } }; return { createThingA: function(name) { return new ThingA(name); } }; }(); FactoryClassB = function() { // Define a ThingB class that inherits from ThingA somehow return { createThingB: function() { return new ThingB(); } }; }(); var instanceOfB = FactoryClassB.createThingB(); instanceOfB.sayHi(); // should alert 'Hi,Charlie!'
有没有办法定义包含在FactoryClassB中的ThingB,它继承自FactoryClassA中包含的ThingA?感谢this question,我知道我不会这样做.我正在考虑使用一种方法来扩展给定的类…不知何故?
This answer似乎很接近,但是我无法弄清楚如何修改这个例子的细节,以适应我的情况.我愿意弯曲我公司的一般模式,但是我至少可以靠近它吗?
更新1
为了回应Adam的意见,只需要向工厂类添加一个参数,这里就是我被困住的地方:
ThingB.prototype = new ThingA(); ThingB.prototype.constructor = ThingB;
解决方法
FactoryClassA = function() { var ThingA = function(name) { this.name = name; }; ThingA.prototype = { sayHi: function() { console.log('Hi,' + this.name + '!'); } }; // Add the constructor back to the prototype // (see explanation below) ThingA.prototype.constructor = ThingA; return { createThingA: function(name) { return new ThingA(name); } }; }(); FactoryClassB = function() { // Bootstrapping: // Capture the instance,as we'll need it to set up the prototype var baseInstance = new FactoryClassA.createThingA(); // Capture the constructor var baseConstructor = baseInstance.constructor; // Keep a reference to the base prototype var baseProto = baseConstructor.prototype; function ThingB(name) { // Call base constructor,along with our args baseConstructor.call(this,name); }; ThingB.prototype = baseInstance; ThingB.prototype.constructor = ThingB; ThingB.prototype.sayHi = function() { console.log('here I am'); // call the base class `sayHi` baseProto.sayHi.call(this); }; return { createThingB: function(name) { return new ThingB(name); } }; }(); // Testing var foo = FactoryClassB.createThingB("Indeed"); foo.sayHi(); // Output: // here I am // hi indeed
说明:
在FactoryClassA中,这一行是必要的:
ThingA.prototype.constructor = ThingA;
请注意,JS中的每个原型都将自动创建,并引用其构造函数.例如,当你做:
function T(){}
T.prototype已经有一个称为构造函数的属性,它返回到T.
但是,在ThingA的实现中,您可以通过执行ThingA.prototype = {…}重置整个原型.因此,您现在已经失去了对其构造函数的引用. 99%的病例是确定的,不会有任何负面的副作用(这可能是大多数开发者倾向于忘记它).然而,在继承的情况下,可能是必要的.
现在,在FactoryClassB中,我们需要做一些自举:
var baseInstance = new FactoryClassA.createThingA(); var baseConstructor = baseInstance.constructor; var baseProto = baseConstructor.prototype;
观察最后两行,因为它们是在这种设计模式中实现继承的关键.首先,由于ThingA的构造函数可以通过原型(ThingA.prototype.constructor = ThingA)访问,那么这意味着给定ThingA的一个实例,我们可以直接检索其构造函数.由于构造函数是函数本身,并且由于每个函数都有对其原型的引用,所以我们可以使用baseConstructor.prototype来保存ThingA.prototype的引用.
接下来是关键部分,我们设置了继承链:
function ThingB(name) { // Call the base constructor baseConstructor.call(this,name); }; ThingB.prototype = baseInstance; ThingB.prototype.constructor = ThingB;
上面的最后一行是非常重要的,因为它告诉原型它的构造函数是什么,否则它仍然指向ThingA.
你有它 – 原型继承.
边注:
你可能会看到上述如何可以相当乏味,有点奇怪,重复. Ergo,你可能想考虑像Fiber.js这样的继承库,它遵循你想要的封装模式(以及一些奖金,如mixins和decorator).免责声明:我创作了图书馆.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。