Нажатие элементов на массив в конструкторе Ext JS приводит к нескольким элементам

Question

У меня есть класс Ext JS, который я определил. В этом классе constructor я нажимаю текстовое поле на массив своих элементов и добавляю к своей тестовой строке. И массив, и строка объявляются пустыми в определении класса. Однако, если вы попытаетесь создать несколько экземпляров класса, вы увидите, что массив items является общим для каждого экземпляра, но строка - нет.

Это кажется странным, так как я ожидаю, что определение класса будет использоваться в качестве своего рода шаблона, поэтому каждый новый класс начнется с нуля. Похоже, это неверно, поэтому я понимаю, что это связано с примитивами против объектов, но я не совсем уверен, почему. Какое техническое объяснение Ext JS делает это? Разве this в конструкторе ссылается на этот конкретный экземпляр, а не на фактическое определение класса?

Я не спрашиваю, как исправить проблему ... Я знаю, как это сделать (объявлять массивы и объекты внутри initComponent/constructor). Я спрашиваю, что это за техническое объяснение. Из того, что я собираю, это не так, как ведут себя классы ES6, поэтому я предполагаю, что это связано с дизайном системы класса Ext JS.

Адрес example.

Ext.application({ 
    name : 'Fiddle', 

    launch : function() { 
     Ext.define('MyClass', { 
      extend: 'Ext.panel.Panel', 
      alias: 'widget.myClass', 
      items: [], 
      border: true, 
      myTestString: '', 
      constructor: function(config) { 
       this.items.push({ 
        xtype: 'textfield', 
        fieldLabel: 'test' 
       }); 
       this.myTestString += 'hi'; 
       this.callParent(arguments); 
      } 
     }); 
     var v = Ext.create('Ext.container.Viewport', { 
      defaults: { 
       xtype: 'myClass', 
       listeners: { 
        afterrender: function(panel) { 
         console.log(panel.myTestString); 
        } 
       } 
      }, 
      items: [{ 
       title: 'One' 
      }, { 
       title: 'Two' 
      }, { 
       title: 'Three' 
      }] 
     }); 
    } 
}); 

Answer 1

По словам Эвана Trimboli над на Sencha Forums, это связанно с прототипом наследования. Смысл, любые свойства, добавленные в определение класса, рассматриваются как добавление к прототипу объекта. В сочетании с тем, что объекты передаются по ссылке, когда мы добавляем в массив, он обновляется на прототипе класса и используется для создания следующего экземпляра. Это похоже на следующем примере:

function MyClass(item) { 
    this.items.push(item); 
} 
MyClass.prototype.items = []; 
var c1 = new MyClass(1); 
var c2 = new MyClass(2); 
console.log(c2.items); // returns an array of [1, 2] 

В ECMAScript 6, система класса не позволяет свойства класса, но он, по-видимому, рассматривается для ES7 (в этом SO answer).