javascript - Widget 的类变量和构造函数中初始化数组的区别？

Question

如果我在小部件的类变量中或在其构造函数中初始化数组，是否有区别？

要清楚，这(声明 1)之间有什么区别:

define([
        "dojo/_base/declare" //
        , "dijit/_WidgetBase" //
        , "dojox/dtl/_Templated"
        , 'dojo/domReady!'
        ], function(declare, WidgetBase, Templated){
    return declare([WidgetBase, Templated], {
            controls: [],
            constructor: function(params, srcNodeRef){
                this.inherited(arguments);
            }
});

和这个(声明 2):

define([
        "dojo/_base/declare" //
        , "dijit/_WidgetBase" //
        , "dojox/dtl/_Templated"
        , 'dojo/domReady!'
        ], function(declare, WidgetBase, Templated){
    return declare([WidgetBase, Templated], {
            constructor: function(params, srcNodeRef){
                this.inherited(arguments);
                this.controls= [];
            }
});

这些声明的区别在于属性controls。在声明 1 中，它被初始化为一个类成员变量。在声明 2 中，它在构造函数中初始化，类引用它。

我注意到，如果我们使用声明 1，则 widget.controls 数组会在小部件的不同实例之间共享。明确地说，如果我们使用声明 1 并执行以下操作:

var widget1= new Widget();
var widget2= new Widget();

然后，widget1.controls 引用与 widget2.controls 相同的数组。声明 2 不是这种情况。如果我们使用声明 1 和声明 2 的组合，也不是这种情况，即如果我们将 controls: null 放在类成员变量中并初始化 this.controls= [] 在构造函数中。所以声明 3 变成:

define([
        "dojo/_base/declare" //
        , "dijit/_WidgetBase" //
        , "dojox/dtl/_Templated"
        , 'dojo/domReady!'
        ], function(declare, WidgetBase, Templated){
    return declare([WidgetBase, Templated], {
            controls: null,
            constructor: function(params, srcNodeRef){
                this.inherited(arguments);
                this.controls= [];
            }
});

这也符合我的预期。关于我哪里出错或我在这里不理解的地方有什么想法吗？

谢谢! :)

Answer 1

此行为的原因是简单类型是按值分配的，而对象是按引用分配的，在 JavaScript 中数组是对象(在您的例子中是 controls)。

如果您的类包含数组或其他对象，则应在 constructor() 中声明它们，以便每个实例都有自己的副本。

可以直接在类中声明字符串、数字、 bool 值、null 等简单类型，因为简单类型是按值分配的。

例子:

define(["dojo/_base/declare", "my/Foo"], function(declare, Foo){
  return declare(null, {
    arr: [ 1, 2, 3, 4 ], // object. shared by all instances!
    num: 5,              // simple type value non-object. not shared.
    str: "string",       // simple type value non-object. not shared.
    obj: new Foo(),      // object. shared by all instances!

    constructor: function(){
      this.arr = [ 1, 2, 3, 4 ]; // per-instance object.
      this.obj = new Foo();      // per-instance object.
    }
  });
});