Javascript 箭头函数

103 阅读 0 评论 68 点赞

我是靠谱客的博主怡然小刺猬，这篇文章主要介绍Javascript 箭头函数，现在分享给大家，希望可以做个参考。

箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

为什么叫Arrow Function？因为它的定义用的就是一个箭头：

复制代码

1
2
3
4
5
6
7
8
//之前ES5模式时, 定义函数
Var f = function (v) {return v}

//ES6箭头函数
Var f = (v) => {return v};

//像这样只有一个参数一个返回值的还可以这么写
var f = v => v;

由于大括号被解释为代码块所以如果箭头函数直接返回一个对象的话必须加上一个大括号

复制代码

1
var fun = id => ({id:id,name:name});

下面我们看一个稍微复杂一点的例子:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//将下面这个函数转变成箭头函数
function insert(value) {
  return {into: function (array) {
    return {after: function (afterValue) {
      array.splice(array.indexOf(afterValue) + 1, 0, value);
      return array;
    }};
  }};
}


//箭头函数
let insert = (value) => ({into: (array) => ({after: (afterValue) => {
  array.splice(array.indexOf(afterValue) + 1, 0, value);
  return array;
}})});

箭头函数有几个使用注意点:

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//例: 普通函数
var id = 10;
function foo() {
  setTimeout(function(){
    console.log('id:', this.id);
  }, 100);
};

var obj = {
    id : 20
}
foo.call(obj);

//输出10; 因为在foo函数内部this指针并未发生变化.

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
var id = 10;
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
};
var obj = {
    id : 20
}
foo.call(obj);

//使用箭头函数, 输出20