ES6 中的箭头函数介绍

2020-03-18 0 By admin

一、基本语法

1.1、箭头函数的语法

const funName = (arguments) => {
	函数语句
}

1.2、示例

// 1、两数相比,求大值
const max = (a, b) => {
  if(a >= b)
    return a;
  return b;
}
// 2、求倍数
var f = v => v*2;
// 等价于
var f = function(v){
  return v*2;
}
// 3、判断偶数
var isEven = n => n % 2 == 0;
if (isEven(10)) {
	return true
}
  1. 单个参数时,不需要使用小括号。
  2. 函数中只有一条语句时,不需要使用大括号。
  3. 函数中只有一条语句时,可以省略return 关键词。

二、箭头函数中的this

2.1、普通函数中的this

普通函数的 this 是可变的,我们把函数归为两种状态,一种是定义时,一种是执行时。如果仔细研究会发现,函数中的 this 始终是指向函数执行时所在的对象。
比如全局函数执行时,this 指向 window;对象的方法执行时,this 指向该对象,这就是函数 this 的可变。。

2.2、箭头函数中的this

箭头函数中的 this 是固定的,是定义时确定。实际上,箭头函数并没有 this 对象,将箭头函数转成 ES5 会发现。通过 call aply 等方法是无法绑定 箭头函数中的 this。
在对象的方法中直接使用箭头函数,会指向 window;其他箭头函数 this 会指向上一层的 this,箭头函数并没有存储 this。

三、箭头函数使用的注意的地方

1、不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。因为箭头函数的this是由定义它的对象决定的,对象的构造函数是顶层的,它的外层,没有this可以传进去给箭头函数使用。

2、不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。

3、不可以使用yield命令,因此箭头函数不能用作Generator函数。