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 BaseClass = Class.extend({
    construct: function() {
        //BaseClass constructor code goes here
    },
        
    getName: function() {
        return this.getId();
    },
    
    getId: function() {
        return 1;
    }
});

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



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