JSFiddle - React, Tailwind, and code Playground

by Andrey K

HTML

<div id="log">
</div>

JavaScript

$inheritance = {
    extendClass: function(parent, className, constructor, body) {
        //create class function by wrapping constructor function and adding __parent and __className
        var cls = function() {
            this.__parent = parent;
            this.getParent = function() {
                return this.__parent;
            };

            this.__className = className;
            this.getClassName = function() {
                return this.__className;
            };

            constructor.apply(this, arguments);
        };

        //extend parent class
        cls.prototype = Object.create(parent.prototype);
        cls.prototype.constructor = cls;
        
        //add methods
        $.extend(cls.prototype, body);

        return cls;
    }
};

var Base = Base || $inheritance.extendClass(
    Object,

    "Base",

    function(opts) {
        $("#log").append("<div>CONSTRUCTOR of " + this.getClassName() + "</div>");

        this.opts = opts;
    }
);

var View = View || $inheritance.extendClass(
    Base,

    "View",

    function(opts) {
        $("#log").append("<div>CONSTRUCTOR of " + this.getClassName() + "</div>");

        this.getParent().call(this, opts); // call super constructor.
        
        $("#log").append("<div>CALLING <span style='color:red;'>" + this.getClassName() + ".test() <== supposed to be View.test()</span></div>");
        
        this.test();
    },

    {
        test: function() {
            $("#log").append("<div>DATA: " + this.opts.data + "</div>");
        }
    }
);

$(function() {
    new View({ data: "This is test data" });
});