es6 arrow function and key word "this"

Question

const func = (() => {
  
  const init = (data) => {
    organizeData(data);
    return this;
  }
  
  const otherFunc = () => {
    //Do something else
  }

  return {
  init:init,
  otherFunc: otherFunc
  }

})();

func.init(data).otherFunc()

I have an issue with the "this" in my init function. It refers to the window instead of my func object.

it returns func.init(data).otherFunc() is not a function because it points to the window instead of my func

Thanks in advance

That appears to be the normal behavior; what exactly is your question? — Claies, Oct 06 '16 at 21:49
I want 'this' key word in my init function refers to my object and not the window — Nizar AYARI, Oct 06 '16 at 21:51
When I use es5 function it's working but when I use arrow function, this refers to the window — Nizar AYARI, Oct 06 '16 at 21:52
Yes. `this` behaves differently in arrow functions and function declarations/expressions. That's one of the big differences. Why are you using an arrow function in the first place if you are not interested in using its features? — Felix Kling, Oct 06 '16 at 21:52
> How to explicitly refers to the object? You are not listening to the comments or the posted answer(s). You **CANNOT** use arrow functions to assign `this` in the way you are asking! — Sukima, Oct 06 '16 at 21:55
Also tons of other duplicates: https://stackoverflow.com/search?q=%5Becmascript-6%5D+arrow+function+this — Felix Kling, Oct 06 '16 at 21:55

score 0 · Accepted Answer · answered Oct 06 '16 at 21:49

0

The arrow function will assign the context of this to the same context in which it was defined not when it was executed.

This means the first line in your example will bind this to the global namespace because it was defined in the global scope.

If you intend a function to be dynamically bound at run time you're forced to use the old function () {} version and not () => {}.

A good rule of thumb is to only use the arrow functions when you are inside a known context.

answered Oct 06 '16 at 21:49

Sukima

9,965
3
46
60

There is not other way around to it except using es5 function ? – Nizar AYARI Oct 06 '16 at 21:57
@NizarAYARI: Arrow functions solve some very specific use cases. They are not a complete replacement for function declarations/expressions. – Felix Kling Oct 06 '16 at 22:00
1

@NizarAYARI It's not like function declaration are ES5 and arrow functions are ES6. Normal functions are and will continue to be an important part of the language, and you should not use arrow functions where you don't need them. In fact, you'll notice that function declarations are even simpler and shorter than what you currently have. – Bergi Oct 06 '16 at 22:13

es6 arrow function and key word "this"

1 Answers1