zoukankan html css js c++ java

ES6课程---7、箭头函数

一、总结

一句话总结：

箭头函数是ES6中对函数的一种简写方式，可以把let add=function (a,b) {return a+b;} 写成 let add=(a,b)=>a+b; 适用于非方法函数。

let add=function (a,b) {
    return a+b;
};
let add=(a,b)=>a+b;

1、箭头函数语法的特点？

1、如果只有一个参数，参数的()可以省

2、如果函数体只有一个return语句，函数体的{}和return可以省：

//2、如果只有一个参数，参数的()可以省
let people=function (name) {
  console.log(name);
};
people('薛宝钗');
//箭头函数写法
let people1= name =>{
  console.log(name);
};
people1('薛宝钗1');

//3、如果函数体只有一个return语句，函数体的{}和return可以省
let people=function (name) {
  return '名字是：'+name;
};
console.log(people('贾宝玉'));
//箭头函数写法
let people1= name => '名字是：'+name;
console.log(people1('贾宝玉1'));

2、箭头函数注意点？

a、箭头函数不能用作构造器，和 new一起用会抛出错误。

b、箭头函数没有prototype属性。

//箭头函数注意
//a、箭头函数不能用作构造器，和 new一起用会抛出错误。
var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

//b、箭头函数没有prototype属性。
var Foo = () => {};
console.log(Foo.prototype); // undefined

3、箭头函数使用场景？

箭头函数表达式对非方法函数是最合适的，比如回调函数等等，方法函数不适合箭头函数

//四、箭头函数使用场景
//箭头函数表达式对非方法函数是最合适的
let obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
      console.log( this.i, this)
  }
};
obj.b();// undefined, Window{...}
obj.c();// 10, Object {...}

4、普通函数怎么转换成箭头函数？

去掉function，在函数的形参和函数体的大括号中间加一个箭头=>

//函数普通写法
// let people=function (name,age) {
//     console.log(name,age);
// };
// people('林黛玉',15);

//箭头函数写法
//普通函数怎么转换成箭头函数：
// 去掉function，在函数的形参和函数体的大括号中间加一个箭头=>
// let people=(name,age)=>{
//     console.log(name,age);
// };
// people('林黛玉1',151);

二、箭头函数

博客对应课程的视频位置：7、箭头函数
https://www.fanrenyi.com/video/24/204

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>箭头函数</title>
  6 </head>
  7 <body>
  8 <!--
  9 
 10 箭头函数是ES6中对函数的一种简写方式，可以把let add=function (a,b) {return a+b;} 写成 let add=(a,b)=>a+b; 适用于非方法函数。
 11 
 12 let add=function (a,b) {
 13     return a+b;
 14 };
 15 let add=(a,b)=>a+b;
 16 
 17 一、箭头函数语法的特点
 18 1、如果只有一个参数，参数的()可以省
 19 2、如果函数体只有一个return语句，函数体的{}和return可以省：
 20 
 21 二、箭头函数的this
 22 箭头函数没有自己的this，
 23 箭头函数的this不是调用的时候决定的，
 24 而是在定义的时候决定
 25 
 26 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
 27 
 28 三、箭头函数注意点
 29 a、箭头函数不能用作构造器，和 new一起用会抛出错误。
 30 b、箭头函数没有prototype属性。
 31 
 32 四、箭头函数使用场景
 33 箭头函数表达式对非方法函数是最合适的，比如回调函数等等，方法函数不适合箭头函数
 34 
 35 
 36 
 37 -->
 38 <script>
 39 
 40     //1、
 41     //函数普通写法
 42     // let people=function (name,age) {
 43     //     console.log(name,age);
 44     // };
 45     // people('林黛玉',15);
 46 
 47     //箭头函数写法
 48     // let people1=(name,age)=>{
 49     //     console.log(name,age);
 50     // };
 51     // people1('林黛玉',16);
 52 
 53     //2、如果只有一个参数，参数的()可以省
 54     // let people=function (name) {
 55     //     console.log(name);
 56     // };
 57     // people('薛宝钗');
 58     // //箭头函数写法
 59     // let people1= name =>{
 60     //     console.log(name);
 61     // };
 62     // people1('薛宝钗1');
 63 
 64     //3、如果函数体只有一个return语句，函数体的{}和return可以省
 65     // let people=function (name) {
 66     //     return '名字是：'+name;
 67     // };
 68     // console.log(people('贾宝玉'));
 69     // //箭头函数写法
 70     // let people1= name => '名字是：'+name;
 71     // console.log(people1('贾宝玉1'));
 72 
 73     //3.1、如果函数体除了return语句还有其它语句，函数体的{}和return都不可以省
 74     // let people=function (name) {
 75     //     let str='名字是：'+name;
 76     //     return str;
 77     // };
 78     // console.log(people('贾母'));
 79     // //箭头函数写法
 80     // let people1= name => {
 81     //     let str='名字是：'+name;
 82     //     return str;
 83     // };
 84     // console.log(people1('贾母1'));
 85 
 86 </script>
 87 
 88 <script>
 89     //4、箭头函数的this
 90     // function Person(){
 91     //     this.age = 0;
 92     //     console.log('Person');
 93     //     console.log(this);
 94     //
 95     //     setTimeout(function () {
 96     //         console.log('setInterval');
 97     //         console.log(this);
 98     //     }, 1000);
 99     // }
100     // let p = new Person();
101 
102     //箭头函数
103     // function Person() {
104     //     this.age = 0;
105     //     console.log('Person');
106     //     console.log(this);
107     //
108     //     setTimeout(() => {
109     //         this.age++; // |this| 正确地指向 p 实例
110     //         console.log('setInterval');
111     //         console.log(this);
112     //         console.log(this.age);
113     //     }, 1000);
114     // }
115     // let p = new Person();
116 
117 
118     //5、
119     // function Person() {
120     //     this.obj = {
121     //         showThis : () => {
122     //             console.log(this);
123     //         },
124     //         showThis2 :function () {
125     //             console.log(this);
126     //         }
127     //
128     //     }
129     // }
130     // let p1= new Person();
131     // p1.obj.showThis();
132     // p1.obj.showThis2();
133 </script>
134 
135 <!--<button id="btn">按钮btn</button>-->
136 <!--<button id="btn2">箭头函数按钮btn</button>-->
137 <!--<script>-->
138 <!--    let btn = document.getElementById('btn');-->
139 <!--    //没有箭头函数-->
140 <!--    btn.onclick = function () {-->
141 <!--        console.log(this);//btn-->
142 <!--    };-->
143 
144 <!--    //箭头函数-->
145 <!--    let btn2 = document.getElementById('btn2');-->
146 <!--    let obj = {-->
147 <!--        name : '袭人',-->
148 <!--        age : 13,-->
149 <!--        getName : () => {-->
150 <!--            console.log('getName');-->
151 <!--            console.log(this);//箭头定义时候指定this，所以是window-->
152 <!--            btn2.onclick = () => {-->
153 <!--                console.log('btn2.onclick');-->
154 <!--                //箭头函数没有自己的this，一级一级找上去，所以是window-->
155 <!--                console.log(this);-->
156 <!--            };-->
157 <!--        }-->
158 <!--    };-->
159 <!--    obj.getName();-->
160 <!--</script>-->
161 
162 
163 <script>
164     //箭头函数注意
165     //a、箭头函数不能用作构造器，和 new一起用会抛出错误。
166     // var Foo = () => {};
167     // var foo = new Foo(); // TypeError: Foo is not a constructor
168 
169     //b、箭头函数没有prototype属性。
170     // var Foo = () => {};
171     // console.log(Foo.prototype); // undefined
172 </script>
173 
174 <script>
175     //四、箭头函数使用场景
176     //箭头函数表达式对非方法函数是最合适的
177     // let obj = {
178     //     i: 10,
179     //     b: () => console.log(this.i, this),
180     //     c: function() {
181     //         console.log( this.i, this)
182     //     }
183     // };
184     // obj.b();// undefined, Window{...}
185     // obj.c();// 10, Object {...}
186 </script>
187 
188 </body>
189 </html>

三、课程代码

1、箭头函数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>箭头函数</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 箭头函数是ES6中对函数的一种简写方式，可以把let add=function (a,b) {return a+b;} 写成 let add=(a,b)=>a+b; 适用于非方法函数。
11 
12 let add=function (a,b) {
13     return a+b;
14 };
15 let add=(a,b)=>a+b;
16 
17 一、箭头函数语法的特点
18 1、如果只有一个参数，参数的()可以省
19 2、如果函数体只有一个return语句，函数体的{}和return可以省：
20 
21 二、箭头函数的this
22 箭头函数没有自己的this，
23 箭头函数的this不是调用的时候决定的，
24 而是在定义的时候决定
25 
26 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
27 
28 三、箭头函数注意点
29 a、箭头函数不能用作构造器，和 new一起用会抛出错误。
30 b、箭头函数没有prototype属性。
31 
32 四、箭头函数使用场景
33 箭头函数表达式对非方法函数是最合适的，比如回调函数等等，方法函数不适合箭头函数
34 
35 
36 -->
37 <script>
38     //1、
39     //函数普通写法
40     // let people=function (name,age) {
41     //     console.log(name,age);
42     // };
43     // people('林黛玉',15);
44 
45     //箭头函数写法
46     //普通函数怎么转换成箭头函数：
47     // 去掉function，在函数的形参和函数体的大括号中间加一个箭头=>
48     // let people=(name,age)=>{
49     //     console.log(name,age);
50     // };
51     // people('林黛玉1',151);
52 
53     //箭头函数简写形式
54     //1、箭头函数如果只有一个形参，那么小括号可以省略
55     // let people=function (name) {
56     //     console.log(name);
57     // };
58     // people('薛宝钗');
59 
60     // let people=(name)=>{
61     //     console.log(name);
62     // };
63     // people('薛宝钗111');
64 
65     // let people=name=>{
66     //     console.log(name);
67     // };
68     // people('薛宝钗222');
69 
70     //2、箭头函数的函数体中，如果只有一个返回语句，那么函数体的return和大括号都可以省略
71     // let people=function (name) {
72     //     return '名字是'+name;
73     // };
74     // console.log(people('贾母'));
75 
76     // let people=(name)=>{
77     //     return '名字是'+name;
78     // };
79     // console.log(people('贾母111'));
80 
81     // let people=(name)=> '名字是'+name;
82     // console.log(people('贾母222'));
83 
84     // let people=name=> '名字是'+name;
85     // console.log(people('贾母333'));
86 
87     // let people=(name)=>{
88     //     let str='名字是'+name;
89     //     return str;
90     // };
91     // console.log(people('贾母111'));
92 
93 
94 </script>
95 
96 
97 </body>
98 </html>

2、箭头函数this实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>2、箭头函数this实例</title>
 6 </head>
 7 <body>
 8 
 9 
10 <script>
11     //4、箭头函数的this
12     // function Person(name){
13     //     this.name=name;
14     //     this.age = 0;
15     //     console.log('Person');
16     //     console.log(this);
17     //
18     //     let _this=this;
19     //
20     //     setTimeout(function () {
21     //         _this.age++;
22     //         console.log('setTimeout');
23     //         console.log(this);
24     //         console.log(_this);
25     //     }, 1000);
26     // }
27     // let p = new Person('p');
28 
29 
30     //箭头函数
31     // function Person(name){
32     //     this.name=name;
33     //     this.age = 0;
34     //     console.log('Person');
35     //     console.log(this);
36     //
37     //     setTimeout(()=>{
38     //         this.age++;
39     //         console.log('setTimeout');
40     //         console.log(this);
41     //     }, 1000);
42     // }
43     // let p = new Person('p');
44 
45 
46     //5、
47     // function Person(name) {
48     //     this.name=name;
49     //     this.obj = {
50     //         showThis : () => {
51     //             console.log(this);
52     //         },
53     //         showThis2 :function () {
54     //             console.log(this);
55     //         }
56     //     }
57     // }
58     // let p1= new Person('p1');
59     // p1.obj.showThis();
60     // p1.obj.showThis2();
61 </script>
62 
63 <!--<button id="btn">按钮btn</button>-->
64 <!--<script>-->
65 <!--    let btn = document.getElementById('btn');-->
66 <!--    // btn.onclick = function () {-->
67 <!--    //     console.log(this);-->
68 <!--    // };-->
69 <!--    btn.onclick = ()=>{-->
70 <!--        console.log(this);-->
71 <!--    };-->
72 <!--</script>-->
73 
74 </body>
75 </html>

3、箭头函数注意

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>3、箭头函数注意</title>
 6 </head>
 7 <body>
 8 
 9 <script>
10     //箭头函数注意
11     //a、箭头函数不能用作构造器，和 new一起用会抛出错误。
12 
13     // function Foo() {
14     //
15     // }
16     // let Foo=function () {
17     //
18     // }
19 
20     //let Foo=()=>{}
21 
22     // var Foo = () => {};
23     // var foo = new Foo(); // TypeError: Foo is not a constructor
24 
25     //b、箭头函数没有prototype属性。
26     // var Foo = () => {};
27     // console.log(Foo.prototype); // undefined
28     // console.log(Foo);
29 </script>
30 
31 </body>
32 </html>

4、箭头函数使用场景

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>4、箭头函数使用场景</title>
 6 </head>
 7 <body>
 8 
 9 <script>
10     //四、箭头函数使用场景
11     //箭头函数表达式对非方法函数是最合适的
12     //箭头函数不适合方法函数，除此之外，其它情况下箭头函数都可以用
13     let obj = {
14         i: 10,
15         b: () => console.log(this.i, this),
16         c: function() {
17             console.log( this.i, this)
18         }
19     };
20     obj.b();// undefined, Window{...}
21     obj.c();// 10, Object {...}
22 </script>
23 
24 </body>
25 </html>

查看全文

相关阅读:
创建Variant数组
 ASP与存储过程(Stored Procedures)
FileSystemObject对象成员概要
 Kotlin 朱涛9 委托代理懒加载 Delegate
Kotlin 朱涛思维4 空安全思维平台类型非空断言
 Kotlin 朱涛7 高阶函数函数类型 Lambda SAM
Kotlin 朱涛16 协程生命周期 Job 结构化并发
 Proxy 代理模式动态代理 cglib MD
RxJava 设计理念观察者模式 Observable lambdas MD
动态图片 Movie androidgifdrawable GifView

原文地址：https://www.cnblogs.com/Renyi-Fan/p/12695503.html