首先对比下箭头函数与普通函数
1、书写格式
普通函数
function(a) {
console.log(a)
return a
}
箭头函数
- 简洁了不少
(a) => {
console.log(a)
return a
}
- 如果只有一个参数,括号可以省略
a => {
console.log(a)
return a
}
- 如果只有一行代码,可以省略大括号,并且默认在这一行代码前加
return
。所以如果你再加个return
,就会报错。
function b() {
return 1
}
//没有参数不能省略大括号
() => b() √ //此函数返回1
() => return b() ×//此函数报错
2、函数属性
- 都继承于
Function
,原型指向Function.prototype
- 都有
name
和length
(参数个数)两个属性
3、函数内this指向
普通函数
- 普通函数的
this
在声明时指向window
,在调用时指向调用它的对象,如果直接调用,也指向window
function b() {
function a(){ console.log(this) }
let c = function() {a()}
let obj2 = {a,c}
obj2.a()//打印出obj2,打印出调用时的对象obj2
obj2.c()//打印出window,打印出直接调用时的对象window
}
let obj = {b}
obj.b()//使函数b内上下文this为obj
箭头函数
- 箭头函数的this在声明时指向
window
,在调用时指向声明时所在的上下文this
function b() {
let a = () => console.log(this)
let c = function() {a()}
let obj2 = {a,c}
obj2.a()//打印出obj,打印出声明时的上下文,而不是调用它的对象
obj2.c()//打印出obj,打印出声明时的上下文,而不是调用时的上下文
}
let obj = {b}
obj.b()//使函数b内上下文this为obj
4、关于call,apply,bind
普通函数
- 三个方法都适用
let obj = {}
let a = function() { console.log(this) }
a.call(obj)//obj
a.apply(obj)//obj
a = a.bind(obj)
a()//obj
箭头函数
- 因为箭头函数的特殊性三个方法都不适用
let obj = {}
let a = () => { console.log(this) }
a.call(obj)//window
a.apply(obj)//window
a.bind(obj)
a()//window
箭头函数注意事项
- 不能用作构造函数
- 不能使用arguments
- 不能作为对象的方法调用,因为还是指向上下文,而不是调用的对象
- 如果需要this操作,不能用作addEventListener里传的参数