ES6 - Arrow Functions

6. Arrow function (new syntax)

The new way to define functions in ES6

//Fixed syntax structure:() => {}

Arrow functions use simplified function definition syntax

const fn = () => {console.log(123); //123}fn();

Feature 1. There is only one code in the function body, and the execution result of the code is the return value, you can omit the braces (see example below):

 function func(a, b){return a + b;}console.log(func(1,2)); //3//arrow function:const func = (a, b) => a + b;console.log(func(1,2)); //3

Feature 2. If there is only one form parameter, you can omit the parentheses

 function func(a){return a;}console.log(func(1)); //1//arrow function:const func = b => { //const func = b => b;return b;};console.log(func(2)); //2

Feature 3. Arrow function does not bind this keyword, this in arrow function points to the location where function is definedContext this.

function fn(){console.log(this); //{name: 'Xiao Ming'}return() => {console.log(this); //{name: 'Xiao Ming'}}}const obj = {name: 'Xiao Ming'}const resFn = fn.call(obj);resFn();

Another example:

var age = 10;var obj = {age: 20,say:() => {alert(this.age); //10//Pointing to the age object under the widget cannot generate a scope, the say method is actually defined in the global scope}}obj.say();