Javascript jquery小部件中的对象仅作为一个实例运行

我一直在使用widget工厂开发jQuery小部件

一切都很好，只是我注意到，如果我在同一页面上的多个DOM元素上实例化小部件，则小部件中的任何对象都会在DOM元素之间共享，但options对象除外

我认为所有对象和函数在小部件中都有自己的实例。我显然遗漏了一些东西，希望能得到一些指导

例如：

(function($) {
  $.widget("a07.BearCal", {
    options: { className : "test" },
    _glbl: { something: "" },
    _create: function() {
      this._glbl.something = this.element.attr('class');
      this.options.className = this.element.attr('class');
    },
  });
})(jQuery);

// Instantiate widget on .full
$('.full').BearCal();

//Should output full
console.log($('.full').data('BearCal')._glbl.something);

//Should output full
console.log($('.full').data('BearCal').options.className);

// Instantiate widget on .mini
$('.mini').BearCal();

//Should output mini
console.log($('.mini').data('BearCal')._glbl.something);

//Should output mini
console.log($('.mini').data('BearCal').options.className);

//Should output full but outputs mini
console.log($('.full').data('BearCal')._glbl.something);

//Should output full
console.log($('.full').data('BearCal').options.className);​

这方面的工作示例：

---

提前谢谢

小部件的属性：

$.widget("a07.BearCal", {
  // The stuff in here...
});

连接到小部件的原型。小部件工厂知道

选项

，并且知道它需要为每个小部件复制它们：您的

选项

的行为与您预期的一样，因为小部件工厂安排了这种行为。小部件工厂对

\u glbl

一无所知，因此它留在原型上，因此被小部件的所有实例共享

如果需要每个小部件的副本，您可以自己复制

\u glbl

：

  this._glbl = { something: this.element.attr('class') };

这将为每个小部件提供不同的

\u glbl

对象

演示：

如果您的

\u glbl

更复杂，则可以使用将其复制并将

内容合并到：

this._glbl = $.extend(
  { },
  this._glbl,
  { something: this.element.attr('class') }
);

您需要使用
true
作为
$的第一个参数。如果需要深度复制，请扩展
。空对象
{}
是
$所必需的。extend
将把所有内容合并到它的第一个对象参数中，您需要一个新的副本

演示：
非常有意义。但是，作为原始问题的扩展，为什么下面示例中的“something”对象的行为不一样？唯一的区别是它没有嵌套在另一个对象中。因为
something
是直接在对象上设置的（
this.something=…
），但是
this.\u glbl
不是在
this
上，它来自
this
的原型。添加
console.log（'--->”、this.hasOwnProperty（''u glbl'）、this.hasOwnProperty（'something'）的底部创建
并阅读。