A preliminary inquiry into ES6 's Arrow function __ function

Today we are going to introduce the arrow functions in ES6. Grammar

Let's look at the syntax of the arrow function first:

([param] [, param]) => {
   statements
}

param =>

Param is a parameter, depending on the number of parameters, divided into these several cases:
() => {...}//0 parameters are represented by ();
x => {...}///A parameter can be omitted ();
(x, y) => {...}//Multiple parameters cannot be omitted (); Sample

Let's take a look at some examples to see how functions in ES5 can be replaced by the arrow functions in ES6:

ES5
var selected = Alljobs.filter (function (Job) {return
  job.isselected ();
});

ES6
var selected = alljobs.filter (Job => job.isselected ());

Of course, you can also define multiple parameters :

ES5
var total = values.reduce (function (A, b) {return
  a + b;
}, 0);

ES6
var total = Values.reduce ((A, B) => A + B, 0);

Of course, after the => also do not necessarily have to answer the statement after return, look at the following:

ES5
$ ("#confetti-btn"). Click (Function (event) {
  playtrumpet ();
  Fireconfetticannon ();
});
ES6
$ ("#confetti-btn"). Click (Event => {
  playtrumpet ();
  Fireconfetticannon ();
});

It should be noted, however, that multiline statements need to be enclosed in {} , a single line expression does not need {}, and it returns a value as a function .

X => {return x * x}; function returns x * x x
=> x * x;//above line
x => return x * x;///SyntaxError error, cannot omit {}
x => {x * x}; Valid, no return value defined, return undefined

As with normal functions, the arrow functions can also use the remaining parameters and the default parameters.

var func1 = (x = 1, y = 2) => x + y;
Func1 (); Get 3

var func2 = (x, ... args) => {console.log (args)};
Func2 (1,2,3); Output [2, 3]

characteristic

After introducing the syntax and examples of the arrowhead expression, we need to think about it. If the arrow expression simply simplifies the naming of functions, why should we change the original habit and use it? So we need to know the properties of the arrow function .

There is no constructor method and no prototypeinside the arrow function, so the new operation is not supported . But its handling of this is not the same as normal functions. This of the arrow function always points to this when the function is defined, not when it is executed . We have an example to understand:

var o = {
    x:1,
    func:function () {Console.log (this.x)},
    test:function () {
        settimeout (function () {
  this.func ();}
;

O.test (); TypeError:this.func is not a function

The above code will have an error, because this is pointing from O to Global (this in the function call points to the global). If you're not familiar with this in JavaScript, look at one of the articles I've written and get a deeper understandingof this. Well, back to the point, we need to revise the above code as follows:

var o = {
    x:1,
    func:function () {Console.log (this.x)},
    test:function () {
        var _this = this;
        settimeout (function () {
            _this.func ();

}; O.test ();

This is done by using the externally saved in advance. Here we can take advantage of the arrow function, which, as we've just said, is always pointing to this at the time of the function definition, not the execution time . So we'll revise the code above to read:

var o = {
    x:1,
    func:function () {Console.log (this.x)},
    test:function () {
        settimeout (() => { This.func ()}
;

O.test ();

This time this is the point O .

One thing we need to be aware of is that this is not going to change point to object , and we know that call and apply can change the point of this, but it is not valid in the arrow function.

var x = 1,
    o = {
        x:10,
        test: () => this.x
    };

O.test (); 1
o.test.call (o);//Still 1