JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<div id="log">

</div>

JavaScript

//Defines the top level Class
var Class = function() {};
Class.prototype.construct = function() {};
Class.extend = function(def) {
    var classDef = function() {
        if (arguments[0] !== Class) {
            this.construct.apply(this, arguments);
        }
    };

    var proto = new this(Class);
    var superClass = this.prototype;

    for (var n in def) {
        var item = def[n];
        if (item instanceof Function) item.$ = superClass;
        proto[n] = item;
    }

    classDef.prototype = proto;

    //Give this new class the same static extend method    
    classDef.extend = this.extend;
    return classDef;
};
var getBaseClass = function() {
    var BaseClass = Class.extend({
        construct: function() {
            //BaseClass constructor code goes here
        },

        getName: function() {
            return this.getId();
        },

        getId: function() {
            return 1;
        }
    });
    return BaseClass;
}
var getSubClass = function() {
    var SubClass = getBaseClass().extend({
        construct: function() {
            //SubClass constructor code goes here
        },
        //Override BaseClass's getId method
        getId: function() {
            return 2;
        }
    });
return getSubClass;
}

//returns 2
$("#log").append("<div>" + "Notice that, i dont have getName, but i can still call getName and return the local getID value of: " + getSubClass().prototype.getName() + "</div>");
$("#log").append("<div>" + "Notice that this time the getId from my own class gets returned : " + getBaseClass().prototype.getName() + "</div>");