Object literal as property on a prototype object results can cause headaches

Part of today was to enable an object literal to be used as a prototype. This object in turn had an object literal of its own (along with a few methods).

Here is pseudo-code to display what happened:

The object to be used as a prototype

baseObject = {
	settings: {
		aSetting: 'value',
		otherSetting: 'value'
	},
	aProperty: [],
	init: function (settingsObject) {
		var that = this
		that.settings.aSettings = settingsObject.a;
		that.settings.otherSettings = settingsObject.o;
	}
} 

This object is then used as a prototype for a new object using a create method.

if (Object.create !== 'function') {
	Object.create = function (proto) {
		var obj = function () { };
		obj.prototype = proto;
		return new obj();
	}
}

var newObject = Object.create(baseObject);
newObject.init({
	a: 'newValue',
	o: 'newValue'
}); 

Unfortunately, this doesn’t do what I wanted it to do. What I wanted is of course for the settings object of the newObject object to contain the properties that I put in the settingsObject parameter to the init function. What really happens is that I overwrite the properties of the Prototypes settings object. This means that when I create a second object with the baseObject as a prototype, I actually overwrite the prototypes properties again which of course reflects on my first object, not good.

Here is a working solution to this problem, I simply replace the whole settings object for my new objects.

baseObject = {
	settings: {
		aSetting: 'value',
		otherSetting: 'value',
	},
	aProperty: [],
	init: function (settingsObject) {
		var that = this;
		that.settings = {
			aSettings: settingsObject.a,
			otherSettings: settingsObject.o
		}
	}
} 

By doing this I instead replace the settings object alltogether which places the new settings object on my object instance instead of on my prototype.

This is of course pseudo-code and there are prettier ways to replace the settings object with the new properties but this solution shows the problem.

Similar Posts