箭头函数 - 简书

箭头函数

基础语法

（1）(参数1, 参数2, …, 参数N) => { 函数声明 }

相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
(参数1, 参数2, …, 参数N) => 表达式（单一）

（2）当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

（3）没有参数的函数应该写成一对圆括号。
() => {函数声明}

高级语法

//加括号的函数体返回对象字面表达式：参数=> ({foo: bar})

//支持剩余参数和默认参数(参数1, 参数2, ...rest) => {函数声明}(参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}

//同样支持参数列表解构let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;f(); // 6

箭头函数的作用

引入箭头函数有两个方面的作用：更简短的函数并且不绑定this。
Array.prototype.map()//
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

eg:

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'];
  
  elements.map(function(element){
    return element.length;
  });//返回数组：[8,6,7,9]
  
  //上面的普通改写为箭头函数为：
  elements.map((element)=>{
    return element.length;
  });
  
  // 当箭头函数只有一个参数时，可以省略参数的圆括号
  elements.map(element=>{
    return element.length;
  });
  
// 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
elements.map(element => element.length);

// 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构// 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名，// 可以替换成任意合法的变量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

不绑定this

在箭头函数出现之前，每个新定义的函数都有它自己的 this值（在构造函数的情况下是一个新对象，在严格模式的函数调用中为 undefined，如果该函数被作为“对象方法”调用则为基础对象等）。This被证明是令人厌烦的面向对象风格的编程。

function Person(){
    //Peron()构造函数定义'this'作为它自己的实例
    this.age = 0;
    setInterval(function growUp(){
    // 在非严格模式, growUp()函数定义 `this`作为全局对象, 
    // 与在 Person()构造函数中定义的 `this`并不相同.
        this.age++;
    },1000);
}
var p = new Person();

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：

function Person(){
    this.age = 0;
    setInterval(() => {
        this.age++;//this正确的指向p实例
    },1000)
}
var p = new Person();

与严格模式的关系

鉴于 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略。

function Person(){
    this.age = 0;
    var closure = '123';
    setInterval(function growUp() {
        this.age++;
        console.log(closure)
      }, 1000);
}
var p = new Person();

function PersonX(){
    'use strict'
    this.age = 0;
    var closure = "123"
    setInterval(()=>{
        this.age++;
        console.log(closure)
      }, 1000);
}
var px = new PersonX();

通过用call或apply调用

由于箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this---译者注），他们的第一个参数会被忽略。（这种现象对于bind方法同样成立---译者注）

var adder = {
    base : 1,
    
    add : function(a){
        var f = v => v+ this.base;
        return f(a);
    },
    
    addThruCall : function(a){
        var f = v => v + this.base;
        var b = {
            base : 2
        };
        return f.call(b,a);
    }
};
console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2,而不是3

不绑定arguments

箭头函数不绑定Arguments 对象。因此，在本示例中，arguments只是引用了封闭作用域内的arguments：

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

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

foo(1); // 2

最后编辑于：2019.04.09 22:23:19