说一说es6中箭头函数?

介绍箭头函数(特别好)
箭头函数相当于匿名函数,简化了函数定义。箭头函数有两种写法,当函数体是单条语句的时候可以省略{}和return。另一种是包含多条语句,不可以省略{}和return。

箭头函数最大的特点就是没有this,所以this是从外部获取,就是继承外部的执行上下文中的this,由于没有this关键字所以箭头函数也不能作为构造函数, 同时通过 call() 或 apply() 方法调用一个函数时,只能传递参数(不能绑定this),第一个参数会被忽略。箭头函数也没有原型和super。不能使用yield关键字,因此箭头函数不能用作 Generator 函数。不能返回直接对象字面量。

加分回答

箭头函数的不适用场景

  • 定义对象上的方法

当调用 dog.jumps 时,lives 并没有递减。因为 this 没有绑定值,而继承父级作用域。

var dog = {
  lives: 20,
  jumps: () => {
    this.lives--;
  }
}
  • 不适合做事件处理程序

此时触发点击事件,this不是button,无法进行class切换

var button = document.querySelector('button');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});

箭头函数函数适用场景:

  • 简单的函数表达式,内部没有this引用,没有递归、事件绑定、解绑定,适用于map、filter等方法中,写法简洁
var arr = [1,2,3];
var newArr = arr.map((num)=>num*num)
  • 内层函数表达式,需要调用this,且this应与外层函数一致时
let group = {
  title: "Our Group",
  students: ["John", "Pete", "Alice"],
  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};
group.showList();

【延伸阅读】

箭头函数两种使用语法

var fn1 = num => num*num;
var fn2 = (num1,num2) => { return num1+num2;}

箭头函数没有自己的arguments 对象,这不一定是件坏事,因为箭头函数可以访问外围函数的 arguments 对象:

function constant() {
    return () => arguments[0]
}
var result = constant(1);
console.log(result());// 1

箭头函数访问自己的参数,可以通过命名参数或者rest 参数的形式访问参数:

let nums = (...nums) => nums;

不能使用new关键字,使用报错

var Foo = () => {};
var foo = new Foo();// TypeError: Foo is not a constructor
prototype属性为undefined
var Foo = () => {};
console.log(Foo.prototype);// undefined

不能直接返回对象字面量,用params => {object:literal}这种简单的语法返回对象字面量是行不通的。

var func = () => { foo: 1 };
// Calling func() returns undefined!
var func = () => { foo: function() {} };
// SyntaxError: function statement requires a name

这是因为花括号({} )里面的代码被解析为一系列语句(即 foo 被认为是一个标签,而非对象字面量的组成部分)。

所以,记得用圆括号把对象字面量包起来:

var func = () => ({foo: 1});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@luffy27

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值