Talk about the arrow function in es6?

Introducing arrow functions (extremely good)
Arrow functions are equivalent to anonymous functions, simplifying function definitions. There are two ways to write an arrow function. When the function body is a single statement, {} and return can be omitted. The other is to contain multiple statements, {} and return cannot be omitted.

The biggest feature of the arrow function is that there is no this, so this is obtained from the outside, that is, it inherits the this in the external execution context. Since there is no this keyword, the arrow function cannot be used as a constructor, and at the same time through the call() or apply() method When calling a function, only parameters can be passed (this cannot be bound), and the first parameter will be ignored. Arrow functions also have no prototype and super. The yield keyword cannot be used, so arrow functions cannot be used as Generator functions. Cannot return a direct object literal.

Bonus answer

Unsuitable scenarios for arrow functions :

Define a method on an object

When calling dog.jumps, lives is not decremented. Because this has no binding value, it inherits the parent scope.

var dog = {
  lives: 20,
  jumps: () => {
    this.lives--;
  }
}

Not suitable for event handlers

At this time, the click event is triggered, this is not a button, and class switching cannot be performed

var button = document.querySelector('button');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});

Applicable scenarios for arrow function functions:

Simple function expression, no internal this reference, no recursion, event binding, unbinding, suitable for map, filter and other methods, concise writing

var arr = [1,2,3];
var newArr = arr.map((num)=>num*num)

When the inner function expression needs to call this, and this should be consistent with the outer function

let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],
  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};
group.showList();

【Extended reading】

Arrow function two usage syntax

var fn1 = num => num*num;
var fn2 = (num1,num2) => { return num1+num2;}

Arrow functions don't have their own arguments object, which isn't necessarily a bad thing, since arrow functions have access to the surrounding function's arguments object:

function constant() {
    return () => arguments[0]
}
var result = constant(1);
console.log(result());// 1

The arrow function accesses its own parameters, which can be accessed in the form of named parameters or rest parameters:

let nums = (...nums) => nums;

The new keyword cannot be used, and an error will be reported when using it

var Foo = () => {};
var foo = new Foo();// TypeError: Foo is not a constructor
prototype属性为undefined
var Foo = () => {};
console.log(Foo.prototype);// undefined

Object literals cannot be returned directly, and the simple syntax of params => {object:literal} to return object literals does not work.

var func = () => { foo: 1 };
// Calling func() returns undefined!
var func = () => { foo: function() {} };
// SyntaxError: function statement requires a name

This is because the code inside curly braces ( { } ) is parsed as a sequence of statements (ie foo is considered a label, not part of an object literal).

So, remember to wrap object literals in parentheses:

var func = () => ({foo: 1});

Talk about the arrow function in es6?

Guess you like