Building Applications with Spring 5 and Vue.js 2

No lexical this

An arrow function does not have its own this. Unlike an ES5 function, that will create a separate execution context of its own, an arrow function uses surrounding execution context. Let's see the following shopping cart example:

1.  var shoppingCart = {2.    items: ['Apple', 'Orange'],3.    inventory: {Apple: 1, Orange: 0},4.    checkout () {5.      this.items.forEach(item => {6.        if (!this.inventory[item]) {7.          console.log('Item ' + item + ' has sold out.');8.        }      9.      })    10.   }11. }12. shoppingCart.checkout();13. 14. // equivalent to ES515. var shoppingCart = {16.   items: ['Apple', 'Orange'],17.   inventory: {Apple: 1, Orange: 0},18.   checkout: function () {19.     // Reassign context and use closure to make it 20.     // visible to the callback ...