ES6学习3-箭头函数

30次阅读

共计 1332 个字符,预计需要花费 4 分钟才能阅读完成。

1 基本用法

ES6 新增了箭头函数,简化了函数声明过程。

var f = value => value;
// 等同于下面函数
var f = function (value) {return value;};

如果不需要要参数或者多个参数,使用圆括号代表参数部分。如果箭头函数的代码块部分多于一条语句,需要使用大括号,并使用 return 返回。如果直接返回一个对象,必须在对象外面加括号。

var f = {} => 1;
var sum = (num1, num2) => {return num1 + num2;};
// 直接返回一个对象
var getName = name => ({name: 'jack'});

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

let person = ({name, age}) => name + '今年' + age;
let obj = {name: '小王', age: 25};
person(obj); // "小王今年 25"

箭头函数可以使得表达更加简洁。

let arr = [1, 3, 4, 2, 5];
var result = value => value.sort((a, b) => a - b);
result(arr); // [1, 2, 3, 4, 5]

2 this 指向

箭头函数的 this 指向 定义时所在对象 ,而不是使用时所在的对象。因此,在箭头函数中 this 对象的指向是 固定 的。

function foo() {setTimeout(() => {console.log('id:', this.id);
    }, 100);
}

var id = 35;

foo.call({id: 55}); // id: 55

上面代码中,setTimeout 的参数是一个箭头函数,这个箭头函数的定义在 foo 函数生成时才生效,而它真正执行要等到 100ms 后,如果是普通函数,执行时 this 指向全局对象 window,这时应该输出 35。但是箭头函数的 this 总是指向函数定义生效时所在的对象(本例是{id:42}),所以最后输出 42。

箭头函数的 this 指向固化,实际原因是箭头函数根本 没有自己的 this,所以箭头函数内的 this 就是外层代码块的 this。需要注意一点,因为没有 this,所以不能用作构造函数, 也不能使用 call()、apply()、bind()这些方法改变 this 指向。

function foo() {setTimeout(() => {console.log('id', this.id);
  }, 100);
}
// 等同于 ES5 版本
function foo() {
  var _this = this;
  
  setTimeout((function () {console.log('id', _this.id);
  }, 100);
}

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

3 箭头函数的嵌套

箭头函数内部还可以再使用箭头函数。

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

insert(2).into([1, 3]).after(1); // [1, 2, 3]

ps … 参考资料《ES6 标准入门》(第三版)

正文完
 0