微信扫一扫打赏支持

ES6参考---箭头函数

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>

 

 

 

 

 
posted @ 2020-03-27 22:20  范仁义  阅读(295)  评论(0)  编辑  收藏  举报