1.箭头函数的基本使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script> 10 // 箭头函数的写法 11 const 函数名 = (参数列表) => { 12 13 } 14 15 const ccc = () =>{ 16 17 } 18 </script> 19 </body> 20 </html>
2.箭头函数参数和返回值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script> 10 //参数问题 11 //1.1 只放入1个参数 ()可以省略 12 const power1 = (num) =>{ 13 return num * num 14 }; 15 const power2 = num =>{ 16 return num * num 17 } 18 19 //1.2 放入两个参数 20 const sum = (num1,num2) =>{ 21 return num1 + num2 22 } 23 24 // 代码行数问题 25 26 // 1.1箭头函数里面多行代码正常写 27 const hello = () =>{ 28 console.log("hello word"); 29 console.log("hello Vue"); 30 } 31 32 // 1.2 箭头函数里面只有一行代码可以简写 33 const mul = (num1 , num2) =>{ 34 return mun1 * num2 35 } 36 // 简写,自动return返回 37 const mul2 = (num1 ,num2) => num1 * num2 ; 38 const demo = () => "没有返回值的时候，先执行后返回一个undefined" 39 40 //调用验证下 41 console.log(mul2(20,30)); 42 </script> 43 </body> 44 </html>
3.箭头函数中this的使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script> 10 // 将一个函数作为一个参数传到另一个函数的时候用箭头函数最多(高阶函数的时候) 11 12 //问题： 箭头函数中的this是如何查找的 13 //答案： 向外层作用域中，一层层往外查找this，直到有this的定义(也就是最近作用域中的this) 14 //补充：普通function(){}的this就是window 15 const obj1 = { 16 aaa(){ 17 setTimeout(function () { 18 console.log(this) // window 19 }); 20 21 setTimeout(()=>{ 22 console.log(this) // obj1 23 }) 24 } 25 }; 26 obj1.aaa(); 27 28 const obj2 = { 29 bbb(){ 30 setTimeout(function () { 31 setTimeout(function () { 32 console.log(this) // window 33 }); 34 35 setTimeout(()=>{ 36 console.log(this) // window 37 }); 38 }); 39 40 setTimeout(()=>{ 41 setTimeout(function () { 42 console.log(this) //window 43 }); 44 setTimeout(()=>{ 45 console.log(this) // obj2 46 }) 47 }) 48 } 49 }; 50 obj2.bbb() 51 </script> 52 </body> 53 </html>