我写了一个小测试来描述我的问题:
<div id="test1"></div>
<div id="test2"></div>
<script>
(function ($) {
$.widget("mseh.testIt", {
options : {
foo : false,
bar : false
},
_settedOptions : {
foo : false,
bar : false
},
readOptions : function() {
return this._settedOptions;
},
_init : function() {
this._initializeTest();
},
_initializeTest : function() {
var self = this;
$.each(self.options, function(key, value) {
self._settedOptions[key] = value;
});
}
});
})(jQuery);
$('#test1').testIt({ foo : true, bar : false});
$('#test2').testIt({ foo : true, bar : true});
console.log($('#test1').testIt('readOptions'));
console.log($('#test2').testIt('readOptions'));
</script>
在这个示例中,两个日志都给出了'foo'(如预期)的真值和'bar'的真值(不符合预期)。
这是一个错误还是我做错了什么?
使用jQuery 1.7.2和1.9.1进行测试。 使用jQueryUI 1.9.2和1.10.0进行测试。
由于
答案 0 :(得分:2)
因为_settedOptions在testIt的每个实例中共享。
如果你检查_settedOptions在test1和test2之间的对象相等,如下所示, 他们引用相同的对象。
console.log( $('#test1').testIt('readOptions') === $('#test2').testIt('readOptions') );
如果你想把它当作实例变量,请写下面。
(function ($) {
$.widget("mseh.testIt", {
options : {
foo : false,
bar : false
},
// This field will be shared in every instance.
// _settedOptions : {
// foo : false,
// bar : false
// },
readOptions : function() {
return this._settedOptions;
},
_init : function() {
// like this!!!!!
this._settedOptions = {
foo : false,
bar : false
};
this._initializeTest();
},
_initializeTest : function() {
var self = this;
$.each(self.options, function(key, value) {
self._settedOptions[key] = value;
});
}
});
})(jQuery);