《ES6学习3》 箭头函数

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了《ES6学习3》 箭头函数脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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标准入门》(第三版)

脚本宝典总结

以上是脚本宝典为你收集整理的《ES6学习3》 箭头函数全部内容,希望文章能够帮你解决《ES6学习3》 箭头函数所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。