箭头函数:语法比函数表达式更加简洁,并没有自己的this,arguments,super,new,target。这些函数表达式更实用于那些本来需要匿名函数的地方,并且他们不能用作构造函数。
语法: ()=>{};
箭头函数的几种形式
- 形参=>返回值
let fn = num => num*2
console.log(fn(10)) //输出20
- (形参,形参)=>返回值
let fn2=(a,b)=>a+b;
consolg.log(fn2(2,3)) //输出5
()=>{
执行语句
}
(形参,形参) =>{
执行语句
return;
}
注意:箭头函数在定义的时候,需要绑定一个变量,或者自调用
箭头函数的不定参问题:
在es5中,当我们不确定函数参数的时候,可以使用arguments对象来调用参数
function fun(){
console.log(arguments[1])
}
fun(1,3,4,5,5)
ES6中没有arguments对象来帮助我们调用参数
rest 参数 (剩余参数)
let fun2= (...arg)=>{ //arg自定义
// console.log(arguments); 报错
console.log(arg) //12,3,5,6
}
fun2(12,3,5,6)
箭头函数的this的指向问题
普通函数: this没有绑定事件就指向window,this绑定的话 就指向绑定的谁 不受当前作用域影响(window与document不一样)
**箭头函数:**本身没有this,this会指向定义函数时所在的作用域;
箭头函数中的this,首先从他的父级作用域中找,如果父级作用域还是箭头函数,继续往上找,一直没有找到指向window
let fn2= () =>{
// console.log(this) 指向window
}
fu2();
let fn4
let fn5 =function(){
fn4 =() =>{
console.log(this) //this指向window 因为父级也没有绑定事件
}
fn4();
}
// fn5 = fn5.bind(document.body); //this指向body,body改变this的指向
fn5();
document.onclick = function(){
function ffc(){
console.log(this);//指向window
}
let ff = () =>{
console.log(this) //this指向当前作用域事件
}
ffc();
ff();
}
let fun=(a=10,b=5)=>{
return a+b
}
console.log(fun())
Jason–json
发布了87 篇原创文章 · 获赞 10 · 访问量 6957
私信
关注
原文地址:https://blog.csdn.net/weixin_46146313/article/details/104194254
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。