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参数代替。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 上面代码检查函数l...
    呼呼哥阅读 3,476评论 0 1
  • 1.函数参数的默认值 (1).基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。
    赵然228阅读 708评论 0 0
  • 李晓欣回到家里,父母已经在吃晚饭了,母亲听到进门声,没有回头, 母亲:你今天怎么那么晚才回来? 父亲对母亲说...
    辰雨洛星阅读 219评论 0 0
  • 1、不说“不可能”三个字 2、凡事第一反应,找方法,而不是找借口 3、遇到挫折对自己大声说:太棒了! 4、不说消极...
    简单明了阅读 245评论 0 1
  • 完全放手让孩子登台讲课文,这是本学期的第一次尝试,尽管十年前我已让班里十位小老师依次登台给同学们上过语文课,学生给...
    FangFang放下自在阅读 294评论 0 3