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>