箭头函数是ES6语法中新加的一个定义函数的方法,这节主要介绍它与普通函数的一些区别:
1. 箭头函数没有自己的this
箭头函数不会创建自己的this,它没有自己的this,它会继承作用域链的上一层this。它会捕获函数定义时所处的外部环境的this。因此不会再改变。
普通函数的this值与调用位置有关系。
举例:
function func1(){
console.log('普通函数this',this)
}
let func2=()=>{
console.log('箭头函数this',this)
}
let obj={
func2:func2,
func1:func1
}
obj.func1()
obj.func2()
运行结果.png
由上可验证上述说法,普通函数func1由于调用时是在obj对象上调用的,所以其this指向的是obj对象。箭头函数func2的this与定义时的位置有关系,所以func2的this指向的是window对象。
2. 不可以改变this的指向
普通函数可以通过call, apply, bind等方法改变this的指向,而箭头函数的this从定义时就确定好了,无法改变指向。
举个例子:
let obj={
name: 'aaa'
}
var name = 'bbb'
function func1(){
console.log(this.name)
}
let func2=()=>{
console.log(this.name)
}
func1.call(obj) //aaa
func2.call(obj) //bbb
上述例子中,想通过call方法打印obj中的name对箭头函数func2是不生效的。
3. 没有arguments数组
普通函数中arguments数组保存了函数的所有参数。但箭头函数没有改数组。
function func1(a){
console.log(a+arguments[0])
}
let func2=(a)=>{
console.log(a+arguments[0])
}
func1(1) //2
func2(1) //报错
4.不能作为构造函数使用(不能new, 没有原型对象)
箭头函数没有constructor指针,不能作为构造函数使用。如果调用new方法创建实例会报错,因为new的过程如下:
- 创建一个新对象;
- 把this指向这个对象;
- 执行构造函数中的代码,从而将属性和方法添加到这个对象上;
- 返回这个新对象;
因为箭头函数没有自己的this,它的this是外层执行环境的this,不能控制该this的指向,所以第二步执行时会报错。
由于箭头函数不能通过new创建实例,因而也没有原型对象prototype
的需求,所以构造函数也没有原型对象。
参考文献:
MDN
箭头函数与普通函数的区别总结