Arrow functions using call, apply, bind - not working? [duplicate]

问题

This question already has answers here:

When should I use Arrow functions in ECMAScript 6? (9 answers)

Can you bind 'this' in an arrow function? (8 answers)

Are 'Arrow Functions' and 'Functions' equivalent / exchangeable? (1 answer)

Closed 2 years ago.

I'm being a bit puzzled when I try to convert a simple ES5 code to ES6.

Let's say I have this block of code:

var obj = {num: 2}

var addToThis = function (a, b, c) {
  return this.num + a + b + c
}

// call
console.log(addToThis.call(obj, 1, 2, 3))

// apply
const arr = [1, 2, 3]
console.log(addToThis.apply(obj, arr))

// bind
const bound = addToThis.bind(obj)
console.log(bound(1, 2, 3))

Everything above runs smoothly and as expected.

But as soon as I start using ES6 features such as const and arrow function, like this:

const obj = {num: 2}

const addToThis = (a, b, c) => {
  return this.num + a + b + c
}

It doesn't work anymore and throws an error: Cannot read property 'num' of undefined.

Can someone please explain why this doesn't work anymore?

回答1:

Lambda functions (arrow functions) doesn't create new functional context and use context of a calling function.

So "this" refers to a parent context. If there's no 'num' variable than it's undefined.

Usually it's really convenient because most of the time you use one context instead of creating a new one in every function you create. In my opinion call/apply/bind is completely confusing and lambda functions makes it unnecessary.

来源：https://stackoverflow.com/questions/43576089/arrow-functions-using-call-apply-bind-not-working