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

Question

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

要清楚，这个（声明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 中，它被初始化为一个 class 成员变量。在声明 2 中，它在构造函数中初始化，class 引用它。

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

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

那么，widget1.controls和widget2.controls指的是同一个数组。声明 2 不是这种情况。如果我们使用声明 1 和声明 2 的组合，即如果我们将 controls: null 放入 class 成员变量并初始化 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）。

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

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

示例：

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.
    }
  });
});

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

Difference between initializing array in Widget's class variable and constructor?

javascript

dojo

widget