JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<button>Click me H.A.R.D.</button>
<p></p>

Babel + JSX

const button = document.querySelector('button');
const log = document.querySelector('p');
let id = 1;

function MyClickButton(notify) {
	this.notify = notify;
}

MyClickButton.prototype.click = function() {
  log.innerHTML += `${id++}. ${this.notify}<br>`;
};


////////////////////////////////////////////////////////////////////////////////
// Testing...
const myClickButton = new MyClickButton("Workz");

// 1
myClickButton.click();

// 2
var fail = myClickButton.click;
fail();

// 3
var workz = myClickButton.click.bind(myClickButton);
workz();

// 4
button.addEventListener('click', myClickButton.click);

// 5
button.addEventListener('click', myClickButton.click.bind(myClickButton));

// 6
button.addEventListener('click', () => myClickButton.click());

// 7
MyClickButton.prototype.simulateClick = function() {
  // nur die arrow-function würde this automatisch binden
  const that = this;
  button.addEventListener('click', function() { 
  	that.click() 
  });
  
  // 8
  button.addEventListener('click', this.click.bind(this));
}

myClickButton.simulateClick();