Posts
<form>
<p>
<button id="f1">Invoke with function</button>
</p>
<p>
<button id="f2">Invoke with lambda</button
</p>
<div id="output"></div>
</form>
<script>
'use strict';
(function () {
let f1 = document.querySelector('#f1'),
f2 = document.querySelector('#f2'),
output = document.querySelector('#output');
function appendResult(message) {
let log = document.createElement('pre');
log.appendChild(document.createTextNode(message));
output.appendChild(log);
}
// define with function, reference 'this' to button element
f1.onclick = function () {
appendResult('Button [Invoke with function] clicked!');
appendResult('This is: ' + JSON.stringify(this) + ' [' + this.constructor.name + ']');
console.log(this);
return false;
};
// define with lambda, reference 'this' to {name: 'Bruce'} object
f2.onclick = () => {
appendResult('Button [Invoke with lambda] clicked!');
appendResult('This is: ' + JSON.stringify(this) + ' [' + this.constructor.name + ']');
console.log(this);
return false;
};
}).call({name: 'Bruce'})
</script>
Result:
