SAPUI5 - property scope - sapui5

Question

I have two controls, one that extends from Control, and one that extends from my custom control.
The controls have an array property that I want to be unique per instance:
/* parent control */
sap.ui.core.Control.extend("foo.MyControl", {
metadata: {
properties: {
name: { type: 'string' },
myArray: { type: 'array', defaultValue: [] }
}
},
renderer: {
render: function( oRenderManager, oControl ) {
oRenderManager.write('<div>My name is: ' + oControl.getName() + '</div>');
}
}
});
/* child control */
foo.MyControl.extend("foo.MyChildControl", {
renderer: {
render: foo.MyControl.prototype.render
}
});
And then I create instances of them and place them in the dom:
/* create and place instances */
var oMyControl = new foo.MyControl({
name: 'parent control'
}),
oMyChildControl = new foo.MyChildControl({
name: 'child control'
});
oMyControl.placeAt('uiArea');
oMyChildControl.placeAt('uiArea');
Why are the 2 array instances equal?
alert(oMyControl.getMyArray() === oMyChildControl.getMyArray()); // true
I would expect that each instance would get it's own array.
**
TL;DR For defining control metadata, declare array properties as type "object"
**

Answer 1

i got exceptions when trying to run your code
type: 'array' isn't correct
The typeof operator in JavaScript returns "object" for arrays.
this works for me
sap.ui.core.Control.extend("foo.MyControl", {
metadata: {
properties: {
name: {
type: 'string'
},
myArray: {
type: 'object',
defaultValue: []
}
}
},
renderer: {
render: function(oRenderManager, oControl) {
oRenderManager.write('<div>' + oControl.getMyArray().toString() + '</div>');
}
}
});
/* child control */
foo.MyControl.extend("foo.MyChildControl", {
renderer: {
render: foo.MyControl.prototype.render
}
});
/* create and place instances */
var oMyControl = new foo.MyControl({
name: 'parent control'
}).placeAt('content');
var oMyChildControl = new foo.MyChildControl({
name: 'child control'
}).placeAt('content');
var aFruits = ["Banana", "Orange", "Apple", "Mango"];
var aColors = ["Red", "Blue", "Green"];
oMyControl.setMyArray(aFruits);
oMyChildControl.setMyArray(aColors);