ES6:ES6的箭头函数考点和this指向考点(五颗星)
1.箭头函数语法
普通函数声明式:
<script> function fn(a,b){ return a+b } console.log(fn(1,2)) //3 </script>
函数表达式:
<script> var fn = function(a,b){ return a+b } console.log(fn(1,2)) //3 </script>
立即执行函数:(函数)(参数)----第一个括号将函数变成表达式
<script> (function(a,b){ console.log(a+b) })(1,2) //3 </script>
箭头函数:(形参)=>{函数体}
<script> let fn=(a,b)=>{ return a+b } console.log(fn(1,2))//3 </script>
2.箭头简写和注意点
箭头函数 一般用在回调函数中,出现的目的也是为了简化回调函数 (函数作为另一个函数的参数使用)
箭头函数写法的注意点:
1. 函数体只有一句话,可以省略{}不写
2. 函数体只有一句话(并且要返回), {}和return都可以不写
3. 函数只有一个参数,可以省略()不写
4. 反之,多个参数,多行函数体----肯定不能简写
5. 如果需要返回一个对象,不能简写(函数的{}和对象的{}打起来了)
6. arguments在箭头函数中不能使用,但是可以使用rest参数
<script> // 1. 无参无返 let fn1 = () => console.log("今天天气晴朗"); fn1();//今天天气晴朗 // 2. 无参有返 let fn2 = () => "今天天气晴朗"; console.log(fn2());//今天天气晴朗 // 3. 有一个参数的函数 let fn3 = a=>console.log(a); fn3(3);//3 // 4. 多参数,多行函数体,还有返回 let fn4 = (x,y)=>{ let sum = x+y; return sum; } console.log(fn4(1,2));//3 // 5. 返回一个对象 /* 预期的返回数据类型 { x:1, y:2 } */ let fn5 = (a,b)=>{ return {x:a,y:b}; } console.log(fn5(1,2));//{x:1,y:2} // 6. rest参数的使用 /* arguments参数不能使用在箭头函数中 let fn6 = ()=>{ console.log(arguments); } console.log(fn6(1,2,2,3,"ss"))//报错:Uncaught ReferenceError: arguments is not defined */ let fn6 = (...rest)=>rest console.log(fn6(1,2,2,3,"ss"))//[1,2,2,3,"ss"] </script>
3.this指向
this指向---------this一般写在函数中
this默认指向window(假设全部指向window):
1.全局中使用------this指向window(全局对象)
<script> console.log(this)//window function fn(){ console.log(this)//window } fn() </script>
2.定时器中使用----this指向window(全局对象)
<script> // setTimeout是window下面的方法,所以setTimeout==window.setTimeout // window.setTimeout(function(){或如下 setTimeout(function(){ console.log(this)//window },1000) </script>
改变了this指向:
3.事件中使用------this指向事件源
<button id="btn">按钮</button
剩余60%内容,订阅专栏后可继续查看/也可单篇购买
前端面试题 文章被收录于专栏
前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理