箭头函数
es6的新方法,优化前端写法,便于开发人员开发。定义需要绑定一个变量或者自调用。
箭头函数
函数形式
形式一
// () => 返回值
let fn = () => 2;
console.log(fn());
形式二
// 形参 => 返回值
let fn2 = num => num*2;
console.log(fn2(10));
形式三
// (形参,形参) => 返回值
let fn3 = (a,b) => a+b;
console.log(fn3(2,5));
// 没有参数或多个参数时,都需要带有()。 只有一个参数的时候,可以省略()
形式四
// () => {
// 执行语句
// }
let fn = () => {
console.log('hello')
}
形式五
// (形参,形参) => {
// 执行语句;
// return 返回值;
// }
let fn = (a=10,b=5) => {
console.log('hello')
return a+b;
}
console.log(fn(6));
形式六(自调用)
// ((a,b) =>{
// console.log(a+b)
// })(1,2)
((a,b) =>{
console.log(a+b)
})(1,2)
箭头函数不定参
- 回顾
在es5中,当我们不确定函数参数的时候,可以使用arguments对象来调用参数
function fun(){
console.log(arguments[0]);
}
fun(1,2,3,4,5,6,7);
- es6中,没有arguments对象来帮助我们调用参数
let fun = () =>{
console.log(arguments);
}
fun(12,3,4,5,6,2,4);
//rest 参数(剩余参数)
let fun2 = (...arg) => {
console.log(arg);
}
fun2(12,3,4,5,6,7,8);
箭头函数 this 指向
箭头函数,本身没有this this会指向 定义函数时 所在的作用域
document.onclick = function(){
console.log(this);
}
document.onclick = ()=>{
console.log(this);
}
- 修改箭头函数中的 this 指向
document.onclick = function(){
console.log(this);
// function ff(){//未绑定给变量、事件默认为全局函数
// console.log(this);
// }
let ff = ()=>{
//函数所在作用域为点击事件,绑定给document
//this指向 document
console.log(this);
}
ff();
}
箭头函数默认参数
箭头函数的默认参数
是在没有传参时,直接使用的
传入参数时,则使用传入的参数
let fn = (a=10,b=5) => {
return a+b;
}
console.log(fn(6));