Es6 Arrow Functions Not Working on the Prototype

ES6 arrow functions not working on the prototype?

Arrow functions provide a lexical this. It uses the this that is available at the time the function is evaluated.

It is logically equivalent to (the following isn't valid code since you can't have a variable named this):

(function(this){
   // code that uses "this"
 })(this)

In your 1st example the arrow function is within the constructor, and this points to the newly generated instance.

In your 3rd example, an arrow function isn't used and standard this behavior works as always (the this in the function scope).

In your 2nd example, you use an arrow function but at the scope it's evaluated, this is global / undefined.

Why can't we create prototypes using ES6 Arrow Functions?

Because by definition, arrow functions don't have prototypes. They're designed to be lightweight, without some of the baggage that old-style functions have.

Another likely reason for this is that arrow functions capture the surrounding this rather than having it determined dynamically. So they would serve poorly as constructor functions because the this within them would be referring to the this from the surrounding scope instead of the object being created. (In fact, you can't even use them as constructor functions. JavaScript will throw an error if you try to.)

From MDN:

Use of prototype property

Arrow functions do not have a prototype property.

var Foo = () => {};
console.log(Foo.prototype); // undefined

Javascript object prototype arrow function not working

You must not use arrow functions (=>) when working with prototypes and referencing their instances (i.e. this) because arrow functions are lexically scoped

Object.prototype.hasOwnProperties = function(properties) { return properties.every(prop => this.hasOwnProperty(prop)) }
var test = {    foo: 'bar',    baz: 'boz'}
result = test.hasOwnProperties(['foo', 'baz'])console.log(result)

Why does my arrow function have a prototype property?

If you run this code in a native ES6 engine, there will not be a prototype property for arrow functions.

Example of native ES6:

var Foo = () => {};console.log(Foo.prototype); 

Arrow function not show with React class prototype

While you can technically add an arrow function onto the prototype by assigning to the .prototype property outside:

class Foo extends React.Component {
}
Foo.prototype.fn = () => {
  // ...
}

Due to how arrow functions work, you won't be able to access the this of the instance inside it. Such an arrow function would only be useable if all the data it needed was passed to it.

But using a standard method would make more sense in most situations

class Foo extends React.Component {
  fn() {
    // ...

or a class field

class Foo extends React.Component {
  fn = () => {

You can't easily detect what class fields are on a class, because they're syntax sugar for

class Foo extends React.Component {
  constructor() {
    this.fn = () => {

They're not on the prototype - they're only on instances. You'll have to examine the instance itself to see what properties it has in order to find such a class field.

const builtinReactInstanceProperties = ['props', 'context', 'refs', 'updater'];
class Foo extends React.Component {
  fn = () => {}
}
const instance = new Foo();
console.log(
  Object.getOwnPropertyNames(instance)
    .filter(propName => !builtinReactInstanceProperties.includes(propName))
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

This not working as expected in nested arrow functions in ES6

From MDN:

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target.(...)

Meaning that inside an arrow function the this refers to the outter most this there is. If you run that in the browser, the this is the window object.

use adder.sum instead of this.sum.

Fiddle

---

Related Topics