【ES6脚丫系列】箭头函数

【ES6脚丫系列】

• 『ES6参考连接汇总』 By 吃码小妖
• 『ES6脚丫系列』扩展运算符spread和rest参数
• 【ES6脚丫系列】变量的解构赋值
• 【ES6脚丫系列】模块Module
• 【ES6脚丫系列】箭头函数
• 【ES6脚丫系列】Set+WeakSet+Map+WeakMap
• 【ES6脚丫系列】Symbol
• 【ES6脚丫系列】遍历器iterator
• 【ES6脚丫系列】Promise

【01】ES6箭头函数

本文字符数4300+，阅读时间约8分钟左右。

【01】箭头函数

等于说，只保留了函数的参数和返回。省略function和return。

写法：

(形参) => {statement;}

=> 等同于return。

0一、参数：

0一、当只有一个参数时，能够省略参数外面的圆括号()。能够省略结尾的分号。

简化为 Identifier => Expression

0二、当有多个参数，或没有参数，或 Rest 参数和参数默认值，或解构参数的函数，都须要用圆括号将参数括起来。(记住第一个状况就行了)

0三、可使用 rest 参数和参数默认值。

0二、statement：语句。

语句只有一个时，能够省略外层的花括号{}。

0三、能够链式写箭头函数。

好比(x)=>(y)=>(x+y)

0四、注意，(形参)和箭头=>必须写在同一行，不然报错。

const fn = x
=> x * 2 // SyntaxError
const fn = (x, y) //SyntaxError
=> {
    return x * y
}

正确的写法应该像这样：

const fn = (x, y) => {
    return x * y
}

【02】必定要关注箭头函数的 this 问题。

0一、箭头函数不绑定this，除了不绑定this以外，还不会绑定arguments、super或new.target。

0二、箭头函数体内的 this，继承的是外层代码块的 this。

0三、若是对象的方法是箭头函数，那么箭头函数中的this是window，由于对象中不存在this，只能往上找，就找到了全局的 this，指向的是 window。即便这个对象在某一个函数内，也是如此。

相同的规则也适用于在 prototype 对象上定义方法。

因此，不用用箭头函数声明对象的方法。

let o = {
  // 不要这么作。
  notThis: () => {
    console.log(this) // Window
    this.objectThis() // Uncaught TypeError: this.objectThis is not a function
  },
  // 能够这么写
  objectThis: function () {
    console.log(this) // o
  }
  // 简化版
  objectThis2 () {
    console.log(this) // o
  }
}

0四、不能使用箭头函数来建立事件监听器，由于 this 再也不绑定到附加到事件监听器的元素。

可使用 event.currentTarget 得到正确的 this 上下文。

button.addEventListener('click', function () {
  console.log(this) // button
})

button.addEventListener('click', e => {
  console.log(this) // Window
  console.log(event.currentTarget) // button
})

0五、适用于定时器，定时器中的箭头函数中的this，继承外层代码块的this。

let o = {
  // Old way
  oldDoSthAfterThree: function () {
    let that = this
    setTimeout(function () {
      console.log(this) // Window
      console.log(that) // o
    })
  },
  // Arrow function way
  doSthAfterThree: function () {
    setTimeout(() => {
      console.log(this) // o
    }, 3000)
  }
}

0六、箭头函数没有本身的 this，因此不能用 call()、apply()、bind() 这些方法去改变 this 的指向。

【03】不能够看成构造函数

也就是说，不可使用 new 命令，不然会抛出一个错误。

var Person = (name, age) => {
    this.name = name
    this.age = age
}
var p = new Func('John', 33) // error

【04】不可使用 yield 命令

所以箭头函数不能用做 Generator 函数。

【05】箭头函数的typeof运算符和普通的function同样：

var func = a => a
console.log(typeof func); // "function"

instanceof也返回true，代表也是Function的实例：

console.log(func instanceof Function); // true

【06】若是返回值是对象

不能直接使用花括号做为返回值，那会致使错误。

JS引擎在遇到对象的花括号时会把它看成代码块，因此它不认识里面的变量标识、冒号和逗号等。

想直接返回一个对象，你只须要用小括号把整个对象包裹起来就好。

例子：

const getInitialData = () => {
    id: 1,
    name: 'Jane Doe'
};

// 这里会抛出错误
let initialData = getInitialData();

例子：

// 这就彻底有效
const getInitialData = () => ({
    id: 1,
    name: 'Jane Doe'
});

let initialData = getInitialData();

【07】箭头函数中不能使用 arguments 对象。

它里面的arguments指向它被包裹的外层函数的arguments。

var arguments = 42;
var arr = () => arguments;

arr(); // 42

function foo() {
    var f = (i) => arguments[0]+i; 
    // foo函数的间接参数绑定
    return f(2);
}

foo(1); // 3

【08】可使用rest参数来访问不定数量的参数。

function foo() { 
    var f = (...args) => args[0]; 
    return f(2); 
}

foo(1); // 2

【09】能够在当即执行函数里使用箭头函数。

例子：

( x => x * 2 )( 3 ); // 6

【10】不要在全局做用域定义箭头函数

由于在函数内部操做this会很容易污染全局做用域。最起码在箭头函数外部包一层普通函数，将this控制在可见的范围内；

【11】一些常见例子：

例子：

// click.js
const btn = document.querySelector('button');

btn.addEventListener('click', (event) => {
    console.log('clicked');
});

例子：

// map.js
let numbers = [1,2,3,4];
let multipliedBy2 = numbers.map((number) => {
    return number * 2;
});

console.log(multipliedBy2); // [2, 4, 6, 8]

例子：

const numbers = [1, 2, 3, 4];
const multipliedBy2 = numbers.map((n) => n * 2);

// 或者不须要为参数加上括号
const multipliedBy2WithShorterCallback = numbers.map(n => n * 2);

例子：

const todos = (state = [], action) => {
    switch(action.type) {
    case ADD_TODO:
        return [..state, action.text];
    default:
        return state;
    }
}

例子：

const multiply = (x) => {
    return (y) => {
        return x * y;
    }
};

const multiplyBy3 = multiply(3);
multiplyBy3(2); // 6
multiplyBy3(3); // 9

例子：

const multiply = (x) => (y) => x * y;

const multiplyBy3 = multiply(3);
multiplyBy3(2); // 6
multiplyBy3(3); // 9

下面是箭头函数的使用模式:

//  一个参数对应一个表达式
param => expression;// 例如 x => x+2;

// 多个参数对应一个表达式
(param [, param]) => expression; //例如 (x,y) => (x + y);

// 一个参数对应多个表示式
param => {statements;} //例如 x = > { x++; return x;};

//  多个参数对应多个表达式
([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;};

//表达式里没有参数
() => expression; //例如var flag = (() => 2)(); flag等于2

() => {statements;} //例如 var flag = (() => {return 1;})(); flag就等于1

//传入一个表达式，返回一个对象
([param]) => ({ key: value });
//例如  var fuc = (x) => ({key:x})
 var object = fuc(1);
alert(object);//{key:1}

【】例子：一些写法

//  有效的常规语法
(function(x, y){
    x= x * 2;
    return x + y;
} (3, "B") );

// 无效的箭头函数语法
( (x, y) => {
    x= x * 2;
    return x + y;
} ( 3, "A" ) );

// 可是能够这样写就是有效的了:
( (x,y) => {
    x= x * 2;return x + y;
} )( 3,"A" );//当即执行函数