JSFiddle - React, Tailwind, and code Playground

by Kaleb Hornsby

HTML

<span>Hello</span>

JavaScript

console.clear();

function Lifeform(props){
    this.setProps(props);
    console.log('new Lifeform', this.props, this);
}
Lifeform.prototype = {
    constructor: Lifeform,
    setProps: function setProps(props){
        console.log(this);
        return this.props = $.extend({}, this.props, props);
    }
};

function Animal(props){
    this.setProps(props);
    console.log('new Animal', this.props, this);
}
Animal.prototype = new Lifeform({isAnimal: true });
Animal.prototype.constructor = Animal;

function Mammal(props){
    this.setProps(props);
    console.log('new Mammal', this.props, this);
    
    this.isMammal = true;
    this.hasFur = true;
}
Mammal.prototype = new Animal({isMammal: true});
Mammal.prototype.constructor = Mammal;

function Dog(props){
    this.setProps(props);
    console.log('new Dog', this.props, this);
    
    this.isDog = true;
    Pet.call(this);
}
Dog.prototype = new Mammal({isDog: true});
Dog.prototype.constructor = Dog;

function Pet(props){
    Animal.prototype.setProps.call(this, props);
    console.log('new Pet', this.props, this.constructor);
    
    this.name = props.name;
    this.owner = props.owner;
    this.isPet = true;
}

var d = new Dog({name: 'Scruffy'});
console.log(d.name, 'is a Dog:', d instanceof Dog == d.isDog);
console.log(d.name, 'is a Mammal:', d instanceof Mammal == d.isMammal);
console.log(d.name, 'is a Pet:', d instanceof Pet);
console.log(d.name, 'has fur:', d.hasFur);
console.log(d.name, 'is an Animal:', d instanceof Animal);
console.log(d.props);