JSFiddle - React, Tailwind, and code Playground

by Adam Granger

HTML

<div id="console">
</div>

CSS

#console {
  font-family:monospace;
  width: 80em;
  background-color:black;
  color: #0F0;
  border: 1px solid gray;
}

JavaScript

console.log = function(text) {
  document.getElementById("console").appendChild(document.createTextNode(text));
  document.getElementById("console").appendChild(document.createElement("br"));
}

function x(other) {
  console.log(this.bar + " " + other);
}

console.log("Calling x() with bar not available");
x();

window.bar = "hello";

console.log("Calling x() when window.bar defined");
x.call();

console.log("Calling bound version of x()");
var horse = {bar:2};
var bound = x.bind(horse);
bound(5);

console.log("Calling manually bound version of x()");
var manualBind = function(fn, target) {
    return function() {
        return fn.apply(target, arguments);
    };
};

var manuallyBound = manualBind(x, horse);
manuallyBound(5);

manualBind(x, horse)(7);