Javascript 箭头函数

箭头函数

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

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

//之前ES5模式时, 定义函数
Var f = function (v) {return v}

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

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

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

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

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

//将下面这个函数转变成箭头函数
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对象，就是定义时所在的对象，而不是使用时所在的对象。

//例: 普通函数
var id = 10;
function foo() {
  setTimeout(function(){
    console.log('id:', this.id);
  }, 100);
};

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

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

var id = 10;
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
};
var obj = {
    id : 20
}
foo.call(obj);

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

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。

最后

以上就是怡然小刺猬为你收集整理的Javascript 箭头函数的全部内容，希望文章能够帮你解决Javascript 箭头函数所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。