在 JavaScript 中动态创建新对象的更好方法?

发布于 2024-10-03 23:28:09 字数 1776 浏览 2 评论 0原文

我有两个像这样定义的对象(为了问题而简化):

var firstObject = function(){ };
firstObject.prototype.doSomethingFirstObjectsDo();

var secondObject = function(){ };
secondObject.prototype.doSomethingSecondObjectsDo();

接下来我有一个对象管理器,它作为我的主应用程序创建对象的一种接口:

var ObjectManager = function()
{
    this.create = {
        FIRST:firstObject,
        SECOND:secondObject
    };
};

ObjectManager.prototype.createObject = function(type)
{
    return new this.create[type]();
};

最后是主应用程序使用对象管理器来创建对象的示例动态创建第一个对象或第二个对象:

var MainApplication = function(options)
{
    this.objectTypes = options.objectTypes;
    this.objManager = new ObjectManager();
};

MainApplication.prototype.createObjects = function()
{
    //Iterate through all the types this application needs to create
    for (var type in this.objectTypes)
    {
        var dynamicallyCreatedObject = this.objManager.createObject(type);
        //Do Something Else
    }
};

这种方法效果很好,但有一个我可以看到的缺点 - 您需要为每个可以创建的对象“类型”正式定义构造函数的名称。

如果我想创建一个“thirdObject”(该对象已经正式定义),我还需要返回并在 ObjectManager 中添加对“thirdObject”构造函数的引用。

理想情况下,我想消除对“ObjectManager”的需要,并且只需能够使用“new”关键字动态调用构造函数方法,如下所示

//Inside MainApplication
for (var type in this.objectTypes)
{
    var dynamicallyCreateObject = new [type]();  //Invalid Syntax
};

: “新”关键字?


回应一些最初的评论:

我应该提到整个应用程序包含在一个匿名函数中。

(function(){
    //All of My Mentioned Code is Found Here
    $(document).ready(function(){
        mainApp = window.mainApp = new MainApplication(options);
    });
});

@casablanca:根据你所说的,我相信我需要在整个匿名函数中实际定义一个命名空间,因为一旦完成,我就没有真正的方法来再次直接引用该范围。我想我知道我现在需要做什么,我有点希望有另一种方法可以使用“new”关键字 - 但情况似乎并非如此。

I have two objects defined something like this (simplified for sake of the question):

var firstObject = function(){ };
firstObject.prototype.doSomethingFirstObjectsDo();

var secondObject = function(){ };
secondObject.prototype.doSomethingSecondObjectsDo();

Next I have an Object Manager which works as a sort of interface for my main application to create objects:

var ObjectManager = function()
{
    this.create = {
        FIRST:firstObject,
        SECOND:secondObject
    };
};

ObjectManager.prototype.createObject = function(type)
{
    return new this.create[type]();
};

Finally an example of the main application using the Object Manager to Dynamically Create Either firstObjects or secondObjects:

var MainApplication = function(options)
{
    this.objectTypes = options.objectTypes;
    this.objManager = new ObjectManager();
};

MainApplication.prototype.createObjects = function()
{
    //Iterate through all the types this application needs to create
    for (var type in this.objectTypes)
    {
        var dynamicallyCreatedObject = this.objManager.createObject(type);
        //Do Something Else
    }
};

This approach works great, but has one disadvantage that I can see - being that you need to formally define the name of the Constructor Function for each Object "Type" that could be created.

In the event that I wanted to create a "thirdObject" - which would be already formally defined - I would also need to go back and add a reference to the "thirdObject"'s constructor function in the ObjectManager.

Ideally, I would like to remove the need for an "ObjectManager" and simply be able to dynamically call the constructor method with the "new" keyword like this:

//Inside MainApplication
for (var type in this.objectTypes)
{
    var dynamicallyCreateObject = new [type]();  //Invalid Syntax
};

Anybody have any thoughts on a better way to handle dynamically creating different objects in JavaScript using the "new" keyword?


Responding to Some Initial Comments:

I should have mentioned that the entire application is enclosed within an anonymous function.

(function(){
    //All of My Mentioned Code is Found Here
    $(document).ready(function(){
        mainApp = window.mainApp = new MainApplication(options);
    });
});

@casablanca: From what you are saying I believe I'll need to actually define a NameSpace inside the entire anonymous function, since once it finishes I have no real way to directly refer to that scope again. I think I know what I need to do now, I was kind of hoping there was another way to work with that "new" keyword - but it doesn't seem like that is the case.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

白芷 2024-10-10 23:28:09

这:

var dynamicallyCreateObject = new [type]();

几乎是正确的,除非您需要一个外部对象来访问属性。如果您的构造函数是全局的,您可以使用 window

var dynamicallyCreateObject = new window[type]();

理想情况下,它们应该位于您自己的命名空间内,在这种情况下您可以执行类似的操作:

var dynamicallyCreateObject = new MyNamespace[type]();

This:

var dynamicallyCreateObject = new [type]();

is almost correct, except you need an outer object to access properties. In the case that your constructors are global, you can use window:

var dynamicallyCreateObject = new window[type]();

Ideally, they should be within your own namespace, in which case you can do something similar:

var dynamicallyCreateObject = new MyNamespace[type]();
天邊彩虹 2024-10-10 23:28:09

假设我理解您的愿望(我不确定我是否理解),您可以在 DOM 0 浏览器中使用全局 window 对象,或者创建您自己的对全局范围的引用,并使用它来查看本地定义的变量。

var $global = this;
var firstObject = function(){};

var objName = "firstObject";
var instance = new $global[objName];

Assuming I understand your desire (and I'm not sure that I do) you can use the global window object in DOM 0 browsers, or create your own reference to the global scope, and use that to look up variables defined locally.

var $global = this;
var firstObject = function(){};

var objName = "firstObject";
var instance = new $global[objName];
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文