微信扫一扫打赏支持

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

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>

 

 

 

 

 

 

 

 

 

 
posted @ 2020-04-30 17:13  范仁义  阅读(487)  评论(0)    收藏  举报