ES6参考---箭头函数
一、总结
一句话总结：
箭头函数是fun1 = () => console.log('fun1()')的结构，主要用来定义匿名函数，做回调函数，没有自己的this
1、箭头函数形参特点？
1、没有参数的话参数的括号要写上
2、有一个参数括号不用写
3、有多个参数括号也要写上
2、箭头函数 函数体的特点？
1、只有一个语句，return和大括号都可以省掉
2、有多个语句，都不能省
3、箭头函数的作用？
箭头函数用来定义匿名函数和回调函数
4、箭头函数this特点？
a、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
b、箭头函数的this看外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window。
二、箭头函数
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>06_箭头函数</title> 6 7 </head> 8 <body> 9 <button id="btn">测试箭头函数this_1</button> 10 <button id="btn2">测试箭头函数this_2</button> 11 12 13 <!-- 14 * 作用: 定义匿名函数 15 * 基本语法: 16 * 没有参数: () => console.log('xxxx') 17 * 一个参数: i => i+2 18 * 大于一个参数: (i,j) => i+j 19 * 函数体不用大括号: 默认返回结果 20 * 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回 21 * 使用场景: 多用来定义回调函数 22 23 * 箭头函数的特点： 24 1、简洁 25 2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this 26 3、扩展理解： 箭头函数的this看外层的是否有函数， 27 如果有，外层函数的this就是内部箭头函数的this， 28 如果没有，则this是window。 29 --> 30 <script type="text/javascript"> 31 let fun = function () { 32 console.log('fun()'); 33 }; 34 fun(); 35 //没有形参，并且函数体只有一条语句 36 let fun1 = () => console.log('fun1()'); 37 fun1(); 38 console.log(fun1()); 39 //一个形参，并且函数体只有一条语句 40 let fun2 = x => x; 41 console.log(fun2(5)); 42 //形参是一个以上 43 let fun3 = (x, y) => x + y; 44 console.log(fun3(25, 39));//64 45 46 //函数体有多条语句 47 let fun4 = (x, y) => { 48 console.log(x, y); 49 return x + y; 50 }; 51 console.log(fun4(34, 48));//82 52 53 setTimeout(() => { 54 console.log(this); 55 },1000) 56 57 let btn = document.getElementById('btn'); 58 //没有箭头函数 59 btn.onclick = function () { 60 console.log(this);//btn 61 }; 62 //箭头函数 63 let btn2 = document.getElementById('btn2'); 64 65 let obj = { 66 name : 'kobe', 67 age : 39, 68 getName : () => { 69 btn2.onclick = () => { 70 console.log(this);//obj 71 }; 72 } 73 }; 74 obj.getName(); 75 76 77 function Person() { 78 this.obj = { 79 showThis : () => { 80 console.log(this); 81 } 82 } 83 } 84 let fun5 = new Person(); 85 fun5.obj.showThis(); 86 87 </script> 88 89 </body> 90 </html>