JSFiddle - React, Tailwind, and code Playground

by KooiInc MeHere

HTML

<script src="https://kooiinc.github.io/JSHelpers/Helpers-min.js"></script>
<div class="solink" data-linkid="28718150"></div>

JavaScript

var log = Helpers.log2Screen;

function Foo(name) { this.name = name || 'just Foo' };
Foo.prototype.log = log;

function Bar() {
    // if assigned within the constructor,
    // you should at least check if 
    // that is already done.
    // *Foo prototype -&gt; Bar will now
    // be assigned on *every* instantiation
    // (see logging in result)
    Bar.prototype = Foo.prototype;
    Bar.prototype.log('*Foo prototype -&gt; Bar');
};

// copy methods
function FooBar() {
  if (!FooBar.prototype.log) {
     for (var l in Foo.prototype) {
       FooBar.prototype[l] = Foo.prototype[l];
     }
     FooBar.prototype.log('*Foo prototype <i>copied</i> to FooBar');
  }
}

// assign prototype from Foo
function BarFoo() {
  if (!BarFoo.prototype.log) {
       BarFoo.prototype = Object.create(Foo.prototype);
       BarFoo.prototype.logExtended = function (msg) {
          this.log('<b>extra!</b> '+msg);
       };
       BarFoo.prototype.log('*Foo prototype -> BarFoo');
    }
}

// this will succeed
function FooFoo() {
  if (!FooFoo.prototype.log) {
       FooFoo.prototype = Object.create(Foo.prototype);
       FooFoo.prototype.log('*Foo prototype -> FooFoo');
       return new FooFoo;
    }
}

// outside creation
function BarBar() { };
BarBar.prototype = Object.create(Foo.prototype);

var bar = new Bar;  // will log *Foo prototype -> Bar
var bar2 = new Bar; // will again log *Foo prototype -> Bar
var foobar = new FooBar;
var barfoo1 = new BarFoo; 
var barfoo2 = new BarFoo;
var doublefoo = new FooFoo;
var doublebar = new BarBar;

try { bar.log('hello!'); }
catch(e) { log('`bar.log` failed =&gt; ', e.message); }

try { barfoo1.log('`barfoo1` (first instance BarFoo) hello!'); }
catch(e) { log('`barfoo1.log` (first instance BarFoo) failed =&gt; ', e.message); }

try { barfoo2.log('`barfoo2.log` (second instance BarFoo) succeeds: <b>hello!</b>'); }
catch(e) { log('`barfoo2.log` (second instance BarFoo) failed =&gt; ', e.message);...