我试图做到以下几点参考:克隆对象和内部功能
var element = {};
element.attrA = 'A';
element.attrB = 1;
element.autoAdvance = function(){
var that = this;
setInterval(function(){
that.attrB++;
},100);
}
element.instance = function(){
var clone = $.extend(true, {}, this);
return clone;
}
现在,我可以做以下就好:
var e1 = element.instance();
var e2 = element.instance();
e1.attrA = 'not e2s business';
e2.attrA = 'not e1s attrA';
,当我尝试使用autoAdvance
麻烦的开始:
e1.autoAdvance();
将启动所有克隆的“实例”element
的autoAdvance。我相信这可能是相当微不足道的,但我不知道如何引用我的autoAdvance
函数中的父对象,它的功能正确,并且只影响实例。谢谢!
编辑:
这是我使用的实际代码:
var player = {};
player.sprites = {};
player.sprites.back = ['img/playerback_01.png','img/playerback_02.png','img/playerback_03.png'];
player.sprites.head = ['img/playerhead_01.png','img/playerhead_02.png','img/playerhead_03.png'];
player.back = new Image();
player.back.src = player.sprites.back[0];
player.head = new Image();
player.head.src = player.sprites.head[0];
player.loop = function(){
var that = this;
var loop = setInterval(function(){
//remove the [0] state from the sprite array and add it at [2]
var state = that.sprites.head.shift();
that.sprites.head.push(state);
state = that.sprites.back.shift();
that.sprites.back.push(state);
that.back.src = that.sprites.back[0];
that.head.src = that.sprites.head[0];
}, 100);
}
player.x = 0;
player.y = 0;
player.instance = function(){
var clone = $.extend(true, {}, this);
return clone;
}
我产生两名球员:
var player1 = player.instance();
var player2 = player.instance();
但正在发生的事情是,当我使用:
player1.loop();
player2
的动画也将开始播放。
看起来不错。证明:http://jsfiddle.net/Q45ft/这个指的是什么取决于函数的调用方式。当你将它称为'e1.autoAdvance()'时,'this'将引用'autoAdvance'中的'e1',并且不会影响任何其他对象。 – 2012-02-14 12:24:28
嗯,我的'实际'代码稍微复杂一些,但我会将其添加到问题中。 – m90 2012-02-14 12:27:20
我假定''.extend'不知道如何克隆'back'和'head'对象(因为它们是'Image's,扩展只能和数组和对象一起工作([source](https:// github.com/jquery/jquery/blob/master/src/core.js#L303)))。我只是使用一个构造函数并使用该函数创建实例。 – 2012-02-14 12:35:55