箭头函数

发表于 | 分类于
关于ES6的一个属性。

基本用法

1
2
3
4
5
6
7
var fn = n => n;

//等同于:

var fn = function(n) {
  return n
}

箭头函数不需要参数或者多个参数，就用一个圆括号代表参数部分

1
2
3
4
5
6
7
8
9
var fn = () => 10;
//等同于:
var fn = function () (return 10);

var sum = (n1, n2) => num1 + num2;
//等同于:
var sum = function(n1, n2) {
  return n1 + n2
};

如果大括号被解释为代码块，所以箭头函数直接返回一个对象，就需要在代码块外面加上括号

1
var fn = id => ({ id: id,name: "tony"});

箭头函数可以与变量结构结合使用。

1
2
3
4
5
const fn = ({f1, f2}) => f1 + 'number' +f2;
//等同于:
function fn(obj) {
  return obj.f1 + 'number' + f2;
}

箭头函数最大的有点就是简化回调函数

1
2
3
4
5
6
7
8
9
10
11
// 正常函数写法
var a = [1,2,3]
a.map(function (n) {
  return n * 1;
});
// 箭头函数写法
var a = [1,2,3]
a.map(n => {
  console.log(n + 1);//1,2,3
  return n + 1
})

箭头函数还可以和rest参数结合

1
2
3
4
5
6
7
const nf = (...a) => {
  console.log(a);//[3,4,5,6]
};
nf(3,4,5,6)

const nf = (a1,...a2) => [a1, a2];
nf(3,4,5,6)//[3,[4,5,6]]

需要注意点

1.函数体内的this对象，就是定义时候所在的对象，而不是使用时所在的对象。

2.不可以当作构造函数，不能使用new命令行否则抛出一个错误。

3.不可以使用arguments对象，如果参数比较多不想代码冗余，可以使用Rest参数代替。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 第一点要值得注意，在箭头函数中this对象的指向是固定的，例如如下
function fn3() {
  return {
    a2: () => console.log(this),
    a3: function() {
      console.log(this);
    }
  }
}
var fn4 = new fn3()

fn4.a2() //this = fn3
fn4.a3() //this = fn4

箭头函数可以让this指向固定化，这种特性对于封装回调函数很友好。例子如下

1
2
3
4
5
6
7
8
9
10
11
12
13
var fn = {
  num: 123456,
  
  init: function() {
    document.addEventListener('click',
    event => this.doSomething(enent.type),false)
   
  },

  doSomething: funciotn() {
    console.log('Handling ' + type + ' for ' + this.id);
  }
}

使用过babel的都知道，es6语法能转换成es5语法（没有使用过可以看下博客下也有一篇对babel说明的文章）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//es6写法
  function fn3() {
    return {
      a2: () => console.log(this),
      a3: function() {
        console.log(this);
      }
    }
  }
//使用过babel转换后的写法
  function fn3() {
    var _this = this;

    return {
      a2: function a2() {
        return console.log(_this);
      },
      a3: function a3() {
        console.log(this);
      }
    };
  }

上面代码中，转换后的 ES5 版本清楚地说明了，箭头函数里面根本没有自己的this，而是引用外层的this。