0

我正在尝试创建具有 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();
});
4

5 回答 5

4

您可以使用 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();
});

小提琴

于 2013-10-08T08:48:40.487 回答
3

之所以'item two'会发出警报，是因为当您执行first = myApp.menuand时second=myApp.menu，两者都first指second的是同一个对象。当您设置该name对象的属性 ( this.name = namein 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

于 2013-10-08T08:49:57.683 回答
2

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

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

var first = jQuery.extend(true, {}, myApp.menu);
var second = jQuery.extend(true, {}, myApp.menu);
于 2013-10-08T08:48:51.783 回答
0

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

请参阅此参考以获取更多信息：

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();
});
于 2013-10-08T08:59:03.950 回答
0

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();
});
于 2013-10-08T08:59:34.513 回答