创建对象属性的多个实例

Question

我正在尝试创建具有init函数的对象的多个版本。 我尝试使用javascript“新”功能，但在这种情况下不起作用，控制台通知我这是因为它不是功能。 请参阅代码以更清晰地描述我要执行的操作。 我知道为什么这段代码会提示第二项而不是第一项，但是我不知道如何获得正确的行为。

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();
});

小提琴

Answer 2

仅警告'item two'的原因是因为当您执行first = myApp.menu和second=myApp.menu ， first和second引用同一个对象。 设置该对象的name属性时（ this.name = name init this.name = name ），两个引用均指向具有更改后属性的同一对象。

最简单的方法是这样的：

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/zh-CN/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/zh-CN/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();
});