箭头函数用 => 符号来定义。
箭头函数相当于匿名函数,所以采用函数表达式的写法。
左边是传入函数的参数,右边是函数中执行的语句。
一、箭头函数基本形式
let func = (num) => num;
let func = () => num;
let sum = (num1,num2) => num1 + num2;
[1,2,3].map(x => x * x);
1、当只有一条 return 语句时,{} 和 return 可以一起省略
const getSum = (x, y) => { return x + y }
const getSum2 = (x, y) => x + y
console.log(getSum(1, 2));
console.log(getSum2(1, 2));
2、当只有一个形参时,() 可以省略
const double = (x) => { return x * 2 }
const double2 = x => x * 2
console.log(double(3));
console.log(double2(3));
3、当只有一条 return 语句,且返回的是一个对象时,把这个对象用()包起来
const f4 = () => { return { a: 2 } }
const f5 = () => ({ a: 2 })
console.log(f4())
console.log(f5())
将函数 fun() 转化为箭头函数
const fun=function(x){
return function(y){
return y*3
}
}
console.log(fun(1)(3));
// 转换为箭头函数
const fun1=x=>y=>y*3
console.log(fun1(1)(4));
二、箭头函数基本特点
1、箭头函数this为父作用域的this,不是调用时的this
箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind。
普通函数的this指向调用它的那个对象。
2、箭头函数不能作为构造函数,不能使用new
3、箭头函数没有 argument ,普通函数有
4、箭头函数没有原型属性
5、箭头函数不能进行函数提升
const fun = () => {
console.log(this)
}
fun()
// new fun()
const obj1 = {
a: 1,
fun2: () =>{
console.log(this)
const fun3 = () => {
console.log(this);
}
fun3()
},
}
obj1.fun2() // window window
obj1.fun2.call(obj1) // window window
const obj2 = {
a: 2,
fun2: function() {
console.log(this)
const fun3 = () => {
console.log(this);
}
fun3()
},
}
obj2.fun2() // obj2 obj2
obj2.fun2.call(obj2) // obj2 obj2