javascript - Explain effect of ES6 class constructor and arrow functions -

i'm learning js , es6 in particular. i'm having trouble understanding why code class constructor , arrow functions doesn't work without few changes.

here started, es6 module exporting flux-like dispatcher object.

// riotcontrol dispatcher formatted es6 module. // https://github.com/jimsparkman/riotcontrol  var dispatcher = {   stores: [],   addstore: function(store) {     this.stores.push(store);   } };  ['on','one','off','trigger'].foreach(function(api){   dispatcher[api] = function() {     var args = [].slice.call(arguments);     this.stores.foreach(function(el){       el[api].apply(null, args);     });   }; });  export default dispatcher 

i wanted make class out of code , ended with:

// riotcontrol dispatcher formatted es6 class module. // https://github.com/jimsparkman/riotcontrol  export default class {   constructor() {             this.stores = []         this.addstore = store => {       this.stores.push(store);     }      ['on','one','off','trigger'].foreach(fn => {       this[fn] = () => {         var args = [].slice.call(arguments)         this.stores.foreach(function(el){           el[fn].apply(null, args)         })       }     })   } } 

for reasons unknown me, doesn't work.

1. the first .foreach(...) results in uncaught typeerror: cannot read property 'foreach' of undefined, if array not defined.
2. var args = [].slice.call(arguments) results in args being 0 length array instead of actually, umm, having arguments.

to code working, changed this:

// riotcontrol dispatcher formatted es6 class module. // https://github.com/jimsparkman/riotcontrol  export default class {   constructor() {             this.stores = []         this.addstore = store => {       this.stores.push(store);     }      var api = ['on','one','off','trigger']     api.foreach(fn => {       this[fn] = function() {         var args = [].slice.call(arguments)         this.stores.foreach(function(el){           el[fn].apply(null, args)         })       }     })   } } 

thus, errors fixed

1. declaring array , calling .foreach on and
2. using regular callback function instead of arrow function.

please explain why foreach inline array fails , why slicing arguments list fails inside arrow function.

also, bonus question, why this in ´this.stores.foreach` bound object instance , not e.g. event causes function called?

please explain why foreach inline array fails , why slicing arguments list fails inside arrow function.

the code interpreted follows:

this.addstore = store => { ... }['on','one','off','trigger'].foreach(...) // becomes this.addstore = store => { ... }['trigger'].foreach(...) 

i.e. trying access trigger property of function, of course not exist. use semicolon after function definition explicitly terminate assignment expression:

this.addstore = store => {   this.stores.push(store); }; ['on','one','off','trigger'].foreach(...); 

also, bonus question, why in this.stores.foreach bound object instance , not e.g. event causes function called?

this not bound here. this refers depends on how function called, shouldn't show.

---

var args = [].slice.call(arguments) results in args being 0 length array instead of actually, umm, having arguments.

in arrow functions, both this , arguments lexically scoped. i.e. arrow functions don't have own arguments object.