arrow function and this

by

Arrow functions don’t bind this. As per MDN:

No binding of this

Until arrow functions, every new function defined its own this value
(a new object in the case of a constructor, undefined in strict mode
function calls, the context object if the function is called as an
“object method”, etc.). This proved to be annoying with an
object-oriented style of programming.

So this in your example will be the global object window which apparently don’t have a property called x.

Example:

function foo() {
  let arrow = () => {
    console.log(this);     // will use foo's this as arrow will never have its own this
  }
  
  arrow.call({"x": "x"});  // ... even if we specify it using bind, call, or apply
}

foo.call({"y": "y"});      // specifying the this for foo (this value will eventually be used by arrow because it will be availbale in its scope)

More Related Contents:

  1. Unable to access React instance (this) inside event handler [duplicate]
  2. Javascript object literal: what exactly is {a, b, c}?
  3. Is it possible to import modules from all files in a directory, using a wildcard?
  4. Call async/await functions in parallel
  5. ES6 Modules: Undefined onclick function after import
  6. How to import jquery using ES6 syntax?
  7. Javascript ES6 TypeError: Class constructor Client cannot be invoked without ‘new’
  8. ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import
  9. Why do I need to await an async function when it is not supposedly returning a Promise?
  10. Scope of Default function parameters in javascript
  11. React useState hook event handler using initial state
  12. Is there a downside to using ES6 template literals syntax without a templated expression?
  13. “This” within es6 class method [duplicate]
  14. What is the meaning of “…args” (three dots) in a function definition?
  15. Syntax error in IE using ES6 arrow functions
  16. Get the class name of ES6 class instance
  17. Using Array objects as key for ES6 Map
  18. Property ‘entries’ does not exist on type ‘ObjectConstructor’
  19. How can I alias a default import in JavaScript?
  20. Simplest way to merge ES6 Maps/Sets?
  21. Not recommended to use “use strict” in ES6?
  22. Clean way to keep original variable and destructure at the same time
  23. Property change subscription with Aurelia
  24. How will browsers handle ES6 import/export syntax
  25. Access to Script at ‘ from origin ‘null’ has been blocked by CORS policy
  26. How to namespace es6 classes (for React components)
  27. Re-export default in ES 6 modules
  28. gulp babel, exports is not defined
  29. What is ‘global symbol registry’?
  30. object destructuring: how to use intermediate nested property

Leave a Comment