Why Doesn't `bind()` Work with Arrow Functions' `this`?

Conundrum of Binding 'this' in Arrow Functions: A Quandary Unveiled

Despite the alluring simplicity of arrow functions, their inscrutable behavior concerning 'this' has puzzled many developers. The inability to bind 'this' to a specific context within an arrow function has become a recurring source of frustration.

To illustrate the dilemma, consider this code:

const f = () => console.log(this);

const o = { a: 42 };

const fBound = f.bind(o);

fBound(); // Expected: { a: 42 }, Actual: { window: Window }

In this example, we attempt to bind the 'this' context of the arrow function 'f' to the object 'o' using the 'bind()' method. However, invoking 'fBound()' inexplicably logs the global 'window' object instead of the expected 'o' object.

This perplexing behavior is rooted in the inherent nature of arrow functions. Unlike regular functions, which have their own 'this' context, arrow functions inherit their 'this' binding from the surrounding lexical scope. In this case, 'f' was defined within the global scope, rendering 'this' bound to the global 'window' object.

The ECMAScript 2015 Specification firmly states:

"Any reference to arguments, super, this, or new.target within an ArrowFunction must resolve to a binding in a lexically enclosing environment."

Thus, rebinding 'this' within an arrow function is rendered an impossibility. 'this' will eternally remain anchored to the context in which the arrow function was defined.

If the meaningful use of 'this' is crucial for your code, the prudent course of action lies in utilizing regular functions instead of arrow functions. Regular functions afford greater control over the 'this' binding, enabling you to bind 'this' explicitly to the desired context using 'bind()' or other methods.

The above is the detailed content of Why Doesn't `bind()` Work with Arrow Functions' `this`?. For more information, please follow other related articles on the PHP Chinese website!