Analysis of arrow functions in ES6 (with examples)-JS Tutorial-php.cn

Analysis of arrow functions in ES6 (with examples)

不言

Release： 2018-11-14 15:24:40

forward

2443 people have browsed it

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:

Shorter way of writing
Not tied Define this

Grammar 1

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

Copy after login

Writing

Formal

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

Copy after login

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
}

Copy after login

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 ==

Copy after login

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()

Copy after login

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

Copy after login

Why? Use babel to parse

Analysis of arrow functions in ES6 (with examples)

and you will find that it is parsed into

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

Copy after login

and does not have

return, compare 4Example

Analysis of arrow functions in ES6 (with examples)

#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'})

Copy after login

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();

Copy after login

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();

Copy after login

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();

Copy after login

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();

Copy after login

Note

The arrow function supports default parameters

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

Copy after login

The arrow function supports the remaining parameters

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

Copy after login

Arrow function supports parameter list deconstruction

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

Copy after login

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

Copy after login

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'
  }
});

Copy after login

Cannot be used with new

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

Copy after login

No prototype

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

Copy after login

The parsing order is affected

let callback;

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

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

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

Copy after login

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!