JSFiddle - React, Tailwind, and code Playground

HTML

<div id="debug"></div>

JavaScript

//Code I got from http://stackoverflow.com/questions/7988566/javascript-class-inherit-from-function-class

Object.extend = function(dest, source) {
    Object.getOwnPropertyNames(source).forEach(function (key) {
        dest[key] = source[key];
    });  
};

var functionFactory = function (proto) {
  return function () {
    var f = function () {
      return f.call.apply(f, arguments);      
    };
    Object.keys(proto).forEach(function (key) {
      f[key] = proto[key];
    });
    f.constructor.apply(f, arguments);
    return f;
  }
}
      
//Creating my abstracted function

var AbstractAnimal = Object.create(Function.prototype);

Object.extend(AbstractAnimal, {
    call: function(sprite, name)
    {
        $(debug).append("called");
        this.sprite = sprite;
        this.name = name;
    },
    constructor: function() { $(debug).append("inherited"); },
    method: function()
    {
        $(debug).append("method called");
        $(debug).append(this.name);
    }
});

//Creating a 'class'

function Animals() {
    this.thing = true;
    var man = new this.Man("not important", "don't pay attention to me");
    var monkey = new this.Monkey("unimportant stuff", "A name");
    //This doesn't work. I want it to.
    //test.method();
    // I also want this:
    // monkey.method = function() { console.log("HA"); }
    //to not effect man.method
}

//Adding the abstracted function to the class

var inheritAbstract = functionFactory(AbstractAnimal);

Animals.prototype.Man = inheritAbstract();
Animals.prototype.Monkey = inheritAbstract();

//initializing it all (I know, initializing at the end is weird... Just for this demo, guys, just for the demo. :) )

var debug = $('#debug');
var test = new Animals();
console.log(test);