Analysis of arrow functions in ES6 (with examples)

The content of this article is about the analysis of arrow functions in ES6 (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Overview

The arrow function has two functions:

1. Shorter way of writing

2. Not tied Define this

Grammar 1

()=>{}
()=>{console.log('arrow');return null}
()=>'hello'
(num1, num2)=>num1+num2
num=>++num
()=>({name:'arrow'})

Writing

Formal

let add = (num1, num2)=>{
   return num1 + num2
}
add(1, 2)

Declare an add variable, which is An addition function. This function has two formal parameters: num1 and num2. The return value is the result of the addition of these two parameters.

Single parameter

let  increment = num=>{
    return num + 1
}

An increment variable is declared above, which The variable is an auto-increment function. The parameter has only one formal parameter num, and the return value is the parameter that increments by 1. Because there is only one parameter, the () in the arrow function parameter list can be omitted

No parameters

let now = () => {
    return Date.now()
}
let now==>{} // Uncaught SyntaxError: Unexpected token ==

The above declares a now variable, which is a function that can obtain the current timestamp. Since no parameters are required, the parameter list is left blank. However, () cannot be omitted in this case, otherwise it will cause a syntax error.

Single return value

let now = () =>  Date.now()

The above function can also be abbreviated as follows, because the function body has only one sentence, so {} and return## can be omitted

#Single return value: return object literal

Although the arrow function can omit {} and return, you should pay special attention when returning an object literal. If it is written like the following, although it is No error will be reported during syntax checking, but it may be different from what you expect. For example, here, the data you want to get is {name:'hello'}, but the result is undefined.

let data=()=>{name:'hello'} // 不会报错 
console.log(data()) // undefined

Why? Use babel to parse

and you will find that it is parsed into

var data = function data() {
  name: 'hello';
};

and does not have

return, compare 4Example

#So, in fact, {name:'hello'} is parsed into a function body, and {} is the {} of the function, not the {} of the object. And name:'hello' is parsed into a statement. This kind of statement is not commonly used, but it satisfies the js grammar. It is called a label. Case:

var str = "";

loop1:
for (var i = 0; i So if the arrow function needs to return a single object literal, it needs Add the right<p>()<code></code></p><pre class="brush:php;toolbar:false">let data=()=>({name:'hello'})

Do not bind this

Look at the following situation

function Person() {
  this.age = 0;

  setInterval(function growUp() {
    console.log(this.age)
  }, 1000);
}

var p = new Person();

Usually, we hope to access it in the callback function of setInterval Person's variables, such as age, but each newly defined function has its own this, so this here is growUp's this, not Person's this, which will cause this.age to be undefined. In order to solve this problem Problem, we usually use a compromise solution:

function Person() {
  this.age = 0;
  var that=this
  setInterval(function growUp() {
    console.log(that.age)
  }, 1000);
}

var p = new Person();

Use a temporary variable that to hold this and avoid using growUp's this. At this time, it is the arrow function's turn to come on stage:

function Person() {
  this.age = 0;
  setInterval(()=> {
    console.log(this.age)
  }, 1000);
}

var p = new Person();

In the arrow function, this will not be bound, that is, it does not have its own this, so at this time, his this is Person's this. This is the so-called arrow function that does not bind this, and in my opinion, the callback function is the best destination for the arrow function.

The result after babel parsing is actually the old method:

"use strict";

function Person() {
  var _this = this;

  this.age = 0;
  setInterval(function () {
    console.log(_this.age);
  }, 1000);
}

var p = new Person();

Note

The arrow function supports default parameters

let add = (num1 = 0, num2) => num1 + num2

The arrow function supports the remaining parameters

let add = (...numList) => numList.reduce((n1, n2) => n1 + n2)

Arrow function supports parameter list deconstruction

let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;

Arrow function does not support arguments. If you want to use arguments, it is recommended to write the remaining parameters above

// 栗子1
var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1
// 栗子2
function foo(n) {
  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n
  return f();
}

foo(1); // 2
// 栗子3
function foo() { 
  var f = (...args) => args[0]; 
  return f(2); 
}

foo(1); 
// 2

Object.defineProperty() will cause unexpected errors Impact

'use strict';
var obj = {
  a: 10
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this);
    return this.a+10; 
   // 代表全局对象 'Window', 因此 'this.a' 返回 'undefined'
  }
});

Cannot be used with new

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

No prototype

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

The parsing order is affected

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

The above is the detailed content of Analysis of arrow functions in ES6 (with examples). For more information, please follow other related articles on the PHP Chinese website!