Javascript lambda: No binding of this
- <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:
Reference:
No binding of this