JSFiddle - React, Tailwind, and code Playground

by Daff

HTML

<script src="https://raw.github.com/daffl/uberproto/master/proto.min.js"></script>

JavaScript

var print = function(text) {
    document.write(text + ' <br />');
}

var Person = Proto.extend({
    init : function(name) {
        this.name = name;
    },
    
    fullName : function() {
        return this.name;
    }
});

var PersonObject = {
    init : function(name) {
        this.name = name;
    },

    fullName : function() {
        return this.name;
    }
};

var dave = Person.create('Dave');
print(dave.name); // -> 'Dave'
print(dave.fullName()); // -> 'Dave'

var john = Proto.create.call(PersonObject, 'John');
print(john.fullName()); // -> 'John'

var BetterPerson = Person.extend({
    init : function(name, lastname) {
        // If you want to pass all original arguments to the
        // _super method just use apply:
        // this._super.apply(this, arguments);
        
        this._super(name);
        this.lastname = lastname;
    },
    
    fullName : function() {
        return this._super() + ' ' + this.lastname;
    }
});

var dave = BetterPerson.create('Dave', 'Doe');
print(dave.name); // -> 'Dave'
print(dave.lastname); // -> 'Doe'
print(dave.fullName()); // -> 'Dave Doe'

var BetterPersonObject = Proto.extend({
    init : function(name, lastname) {
        this._super(name);
        this.lastname = lastname;
    },

    fullName : function() {
        return this._super() + ' ' + this.lastname;
    }
}, PersonObject); // Pass the plain object as the second parameter

Person.mixin({
    init : function()
    {
        this._super.apply(this, arguments);
        this.can_sing = true;
    },
    
    sing : function()
    {
        return 'Laaaa';
    }
});

var dude = Person.create('Dude');
print(dude.sing()); // -> 'Laaaa'
print(dude.can_sing); // -> true

var operaSinger = Person.create('Pavarotti');
operaSinger.mixin({
    sing : function()
    {
        return this._super() + ' Laalaaa!';
    }
});

print(operaSinger.sing()); // -> 'Laaaa Laalaaa!

Proto.mixin({
    fullName : function() {
        return 'My name is: ' +...