微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在JavaScript中扩展一个闭包后面定义的类?

我有一组 JavaScript“类”,其中基类定义了由继承类共享的函数.它正在工作,它是这样设置的:
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 举报,一经查实,本站将立刻删除。

相关推荐