JSFiddle - React, Tailwind, and code Playground

by alexflav23

HTML

<div id="target" style="width:200px;height:200px;background:#000;"></div>

JavaScript

var project = {};

project.bindJs_ = function(fn, selfObj, var_args) {
  if (!fn) {
    throw new Error();
  }

  if (arguments.length > 2) {
    var boundArgs = Array.prototype.slice.call(arguments, 2);
    return function() {
      // Prepend the bound arguments to the current arguments.
      var newArgs = Array.prototype.slice.call(arguments);
      Array.prototype.unshift.apply(newArgs, boundArgs);
      return fn.apply(selfObj, newArgs);
    };

  } else {
    return function() {
      return fn.apply(selfObj, arguments);
    };
  }
};
// A router for the native Function.prototype.bind
project.bindNative_ = function(fn, selfObj, var_args) {
  return /** @type {!Function} */ (fn.call.apply(fn.bind, arguments));
};

project.bind = function() {
   if (Function.prototype.bind &&
       Function.prototype.bind.toString().indexOf('native code') != -1) {
       project.bind = project.bindNative_;
   } else {
       project.bind = project.bindJs_;
   }
   return project.bind.apply(null, arguments);
};

project.someClass = function(x, y) {
    this.someProperty = x;
    this.someOtherProperty = y;
};

var test = new project.someClass("Binding works as expected", 10);
var target = document.getElementById("target");
target.addEventListener('click', project.bind(function() {
    alert(this.someProperty);
}, test), false);;