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

Posted 2023-02-16

【中文标题】Widget的类变量和构造函数中初始化数组的区别？

【英文标题】：Difference between initializing array in Widget's class variable and constructor?

【发布时间】：2017-02-14 04:47:58

【问题描述】：

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

要清楚，这（声明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= [];
            
);

这也符合我的预期。关于我哪里出错或我在这里不理解的任何想法？

谢谢！ :)

【参考方案1】：

这种行为的原因是简单类型是按值分配的，而对象是按引用分配的，在 javascript 数组中是对象（在您的情况下为 controls）。

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

字符串、数字、布尔值、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.
    
  );
);

【讨论】：

所以这不是DOJO问题而是JS问题？

@Himanshu 这就是 JavaScript 的设计方式，不是问题:)

很好地解释了@GibboK，:)