Question

我正在尝试创建一个具有init函数的对象的多个版本。我已经尝试使用javascript'new'函数，但在这种情况下不起作用，控制台通知我这是因为它不是一个函数。请参阅代码以更清楚地描述我要做的事情。我理解为什么这段代码会提醒第二项而不是第一项，但我不知道如何获得正确的行为。

var myApp = {
menu: {
        init: function (name) {
            this.name = name;
        },
        alertName: function () {
            alert(this.name);
        }
    }
}

$(document).ready(function () {
    var first = myApp.menu;
    var second = myApp.menu;
    first.init('item one');
    second.init('item two');
    first.alertName();
});

Answer 1

您可以使用javascript构造函数，并调用new来实例化不同的对象：

var myApp = {
    menu: function(name){
        // if menu is called as a constructor function, `this` will refer
        // to the object being built
        this.name = name;
    }
}

myApp.menu.prototype.alertName = function(){
    alert(this.name);
}

$(document).ready(function () {
    var first = new myApp.menu('item one');
    var second = new myApp.menu('item two');
    first.alertName();
});

fiddle

Answer 2

仅提醒'item two'的原因是，当您执行first = myApp.menu和second=myApp.menu时，first和second都会引用同一个对象。当您在name）中设置该对象的this.name = name属性（init）时，两个引用都指向具有已更改属性的同一对象。

最简单的方法是：

var myApp = {
  menu : {
    init: function (name) {
       this.name = name;
    },
    alertName: function () {
      alert(this.name);
    }
  }
}

var first = Object.create(myApp.menu);
var second = Object.create(myApp.menu);
first.init('item one');
second.init('item two');
first.alertName();

演示：http://jsbin.com/OrEkaPe/1/edit

Object.create创建一个新对象（duh）并将参数设置为新对象的原型。当您访问新对象上的属性并且它不存在时，将从原型访问该属性，从而为您提供所需的继承。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

Answer 3

你必须克隆你的对象。在javascript中，您的变量first和second是对同一对象的两个引用：修改first时，您也修改了second。

您可以使用jQuery.extend()克隆您的对象。

var first = jQuery.extend(true, {}, myApp.menu);
var second = jQuery.extend(true, {}, myApp.menu);

Answer 4

使用{}声明对象实际上是内联初始化，已经是实例而不是构造函数，您的问题的一个解决方案是创建声明性对象。

有关详细信息，请参阅此参考：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

您的问题的快速实施在这里：

http://jsbin.com/OsoWECA/1/edit

var myApp = {
menu: function () {
        this.init = function (name) {
            this.name = name;
        };
        this.alertName = function () {
            alert(this.name);
        };
        return this;
    }
};

$(document).ready(function () {
    var first = new myApp.menu();
    var second = new myApp.menu();
    first.init('item one');
    second.init('item two');
    first.alertName();
    second.alertName();
});

Answer 5

如果需要，您可以实现自己的new，这应该可行：

var myApp = {
menu: {
        init: function (name) {
            this.name = name;
        },
        alertName: function () {
            alert(this.name);
        },
        new: function () {
            var func = function () {}
            func.prototype = this
            return new func;
        }
    }
}

$(document).ready(function () {
    var first = myApp.menu.new();
    var second = myApp.menu.new();
    first.init('item one');
    second.init('item two');
    first.alertName();
});

创建对象属性的多个实例

5 个答案: