Exchange of arrays between basic classes is made possible with ExtJS

Question

Exchange of arrays between basic classes is made possible with ExtJS

I have two subclasses that inherit from a parent class.
Class1 inherits from BaseClass Class2 inherits from BaseClass I create instances of both classes.
When I display the array content of Class2, I see the contents of Class1 as well.

http://jsfiddle.net/k3emY/2/

Ext.onReady(function () {
   var c1 = Ext.create('Child1Class');    
   var c2 = Ext.create('Child2Class');
   alert(c2.someArray.join());  
   //actual result: "BaseClass text ,Class1 text,Class2 text"
   //expected :"BaseClass text ,Class2 text"
});


Ext.define('BaseClass', {
    someArray: ["BaseClass text "],
});

Ext.define('Child1Class', {
    extend : 'BaseClass',
    constructor : function(){
        this.someArray[this.someArray.length] = "Class1 text";
    }
});

Ext.define('Child2Class', {
    extend : 'BaseClass',
    constructor : function(){
        this.someArray[this.someArray.length] = "Class2 text";
    }
});

Why is Class1's data also included in the output?

javascript arrays extjs

Answer 1

Answer №1

someArray is a property that belongs to the prototype of BaseClass. Inheritance in JavaScript allows for shared properties among subclasses and instances, which can lead to unexpected behavior. To prevent this, it's recommended to declare the array within the constructor function. For instance, consider the following simplified example:

function Class() {}
Class.prototype.array = [];

var c1 = new Class();
var c2 = new Class();
c1.array.push('a');
c2.array; // ["a"]

This concept is similar to:

var array = [];
var c1 = { array: array };
var c2 = { array: array };
c1.array === c2.array; // true

By utilizing a constructor function:

function Class() {
    this.array = [];
}

var c1 = new Class();
var c2 = new Class();
c1.array.push('a');
c2.array; // []

A more concise version of the same scenario:

var c1 = { array: [] };
var c2 = { array: [] };
c1.array === c2.array; // false

Answer 2

someArray is a property that belongs to the prototype of BaseClass. Inheritance in JavaScript allows for shared properties among subclasses and instances, which can lead to unexpected behavior. To prevent this, it's recommended to declare the array within the constructor function. For instance, consider the following simplified example:

function Class() {}
Class.prototype.array = [];

var c1 = new Class();
var c2 = new Class();
c1.array.push('a');
c2.array; // ["a"]

This concept is similar to:

var array = [];
var c1 = { array: array };
var c2 = { array: array };
c1.array === c2.array; // true

By utilizing a constructor function:

function Class() {
    this.array = [];
}

var c1 = new Class();
var c2 = new Class();
c1.array.push('a');
c2.array; // []

A more concise version of the same scenario:

var c1 = { array: [] };
var c2 = { array: [] };
c1.array === c2.array; // false

Answer 3

Answer №2

Because each instance shares the same array, you can avoid this by creating a new array for each instance like in this example:

Ext.onReady(function () {
    var c1 = Ext.create('Child1Class');
    var c2 = Ext.create('Child2Class');

    alert(c2.someArray.join());
});

Ext.define('BaseClass', {
    constructor: function (config) {
        this.callParent(arguments);

        Ext.apply(this, {
            someArray: ["BaseClass content "],
        });
    }
});

Ext.define('Child1Class', {
    extend: 'BaseClass',
    constructor: function () {
        this.callParent(arguments);

        this.someArray[this.someArray.length] = "Class1 content";
    }
});

Ext.define('Child2Class', {
    extend: 'BaseClass',
    constructor: function () {
        this.callParent(arguments);

        this.someArray[this.someArray.length] = "Class2 content";
    }
});

Answer 4

Because each instance shares the same array, you can avoid this by creating a new array for each instance like in this example:

Ext.onReady(function () {
    var c1 = Ext.create('Child1Class');
    var c2 = Ext.create('Child2Class');

    alert(c2.someArray.join());
});

Ext.define('BaseClass', {
    constructor: function (config) {
        this.callParent(arguments);

        Ext.apply(this, {
            someArray: ["BaseClass content "],
        });
    }
});

Ext.define('Child1Class', {
    extend: 'BaseClass',
    constructor: function () {
        this.callParent(arguments);

        this.someArray[this.someArray.length] = "Class1 content";
    }
});

Ext.define('Child2Class', {
    extend: 'BaseClass',
    constructor: function () {
        this.callParent(arguments);

        this.someArray[this.someArray.length] = "Class2 content";
    }
});

Exchange of arrays between basic classes is made possible with ExtJS

Answer №1

Answer №2

Similar questions

Using unseralize in PHP allows you to transform the initial data into a different format

"Encountered an error while trying to access properties that

Angular Transclude - ng-repeat fails to iterate over elements

Exploring the world of Palindromes and Arrays: an adventure in exasperation

React-onclickoutside does not function properly within an iframe

Display or conceal certain HTML form elements based on the selection made in the previous form element

Having an issue with the return function in a jQuery $.ajax call

Breaking up a string using regex with various conditions

Tips for finding the index of data in Cesium

Updating $scope in AngularJS works in JavaScript, but the changes are not reflected in the HTML

Efficiently sanitizing a JavaScript object using the replace() method in JavaScript

When using Vuejs2, the list of autosize textareas connected to an expanding array of objects does not properly update their values

Binding an event to an Angular 2 component directly within its selector code

Is it best practice to initialize loaded scripts before the JQuery .load callback is called or should it be done after the .ready callback in the loaded script?

There appears to be an issue with the error handling function within React

Issue with displaying the file-field in Django admin after upgrading from Django 2.1 to version 3

What is the best way to create a promise in a basic redux action creator?

method for sorting labels in Select element in ReactJS

What is the best way to transfer information between two views in Aurelia?

JavaScript function to provide a range of numbers based on a specified number and step value