JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<div id="messagePlaceHolder">

</div>

JavaScript

var ProductPage = function(params){}

ProductPage.prototype.writeMessage = function(message){
	console.log(this);
  var messageElement = document.getElementById('messagePlaceHolder');
  messageElement.innerHTML = message;
}

ProductPage.prototype.message = function(){
	this.writeMessage('message sent from product page prototype')
}

var Configurator = function(params){
	ProductPage.call(this);
  Object.assign(this, params);
  this.level = ['configurator'];
  this.options = [];
}
Configurator.prototype = Object.create(ProductPage.prototype);
Configurator.prototype.constructor = Configurator;
//Define non-inherited methods after creating from parent

Configurator.prototype.init = function(){
	
}

Configurator.prototype.createOption = function(params){
	this.options.push(new Option({level: 'option', name: 'option1', parentId: this.parentId}));
}

var Option = function(params){
	Configurator.call(this);
	Object.assign(this, params)
}
Option.prototype = Object.create(Configurator.prototype);
Option.prototype.constructor = Option;

Option.prototype.message = function(){
	this.writeMessage('message sent from option proto, parentId : ' + this.parentId)
}

var Selection = function(params){

}
Selection.prototype = Object.create(Configurator.prototype);
Selection.prototype.constructor = Selection;

var myInstance = new Configurator({
	param0 : 'param0',
	name: 'myPage',
  parentId : 'soco-pendant'
});

myInstance.createOption()
myInstance.options[0].message();