ES6扩展——箭头函数
1、箭头函数
在es6中，单一参数的单行箭头函数语法结构可以总结如下：
const 函数名 = 传入的参数 => 函数返回的内容，因此针对于
const pop = arr => arr.pop()，其中 pop是函数名， arr是传的参数 ， =>之后的内容是函数返回的内容，该函数相当于:
var pop = function(arr){
arr.pop()
}
//箭头函数 const add1 = (a,b) => a+b; console.log(add1(2,2)); //4 const add2 = function(a,b){ return a+b; } console.log(add2(2,2)); //4
2、函数体为多行时的写法
//函数体为多行时 const add3 = (a,b) => { a += 1; return a + b; }; console.log(add3(2,2)); //5 const add4 = function(a,b){ a += 1; return a + b; } console.log(add4(2,2)); //5
3、不需要返回值时
//有时候不需要返回值,但是语句只有一条,偏偏这个语句有返回值 //只有一个参数时可以不用带括号 //对arr数组调用pop方法,返回值是被pop掉的最后一项 const pop = arr => arr.pop(); console.log(pop([1,2,3])); //3 //并不希望有返回值3 //法一:void关键字 const pop1 = arr => void arr.pop1(); //undefined //法二:将箭头函数写成多行的形式 const pop2 = arr => { arr.pop(); }; console.log(pop2([1,2,3])); //undefined
4、箭头函数与普通函数的第一个区别：没有arguments
//箭头函数与普通函数的第一个区别：没有arguments对象,要用扩展运算符去接收参数 const log = () => { //console.log(arguments); //报错 arguments is not defined }; log(1,2,3); //箭头函数要用扩展运算符去接收参数 const log1 = (...args) => { console.log(args); //[1,2,3] }; log1(1,2,3);
5、箭头函数与普通函数的第二个区别：它没有自己的this
//箭头函数与普通函数的第二个区别:它没有自己的this,箭头函数的this是自身所处环境的那个this const xiaoming = { name:'小明', say1: function(){ console.log(this); }, say2: () => { //say2虽然在xiaoming里面,但是它没有自己的this,它是和xiaoming同一级的;xiaoming又在window里面,所以say2和xiaoming一样指向window console.log(this); } } xiaoming.say1(); //name xiaoming.say2(); //window
6.1、通过闭包的特性保留this
const xiaohong = { name:'xiaohong', age:null, getAge: function(){ //通过保留this的方式,通过闭包的特性去拿this let _this = this //...ajax setTimeout(function(){ _this.age = 14; //console.log(this); //window console.log(_this); //xiaohong },1000); } } xiaohong.getAge();
6.2、同样的对象用箭头函数表达
//在某个回调当中要去访问this上某个属性的问题 //同样的对象xiaohong,用箭头函数表达: const xiaohong1 = { name:'xiaohong1', age:null, getAge:function(){ //...ajax setTimeout(() => { //这个this就是这个函数在定义时所处环境的this。这里的回调函数定义的时候就是getAge的this,getAge的this就是指向xiaohong1的 this.age = 14; console.log(this); //xiaohong1 },1000); } }; xiaohong1.getAge();
7、在es6中，如果只有一行语句，且不加大括号时，默认会将这条语句的结果返回出去。如果有多行语句，用大括号括起来的部分，如果想拿到返回值就必须用return关键字返回。这就是es6的解析机制，记住即可。
分别对应的es5如下：
8、闭包的作用就是让外部访问函数内部定义的变量。
其他补充：
1、箭头函数，一行且没有大括号的情况，是就可以省略return。
箭头函数的函数体中只有一条语句的时候，默认在这条语句前添加了一个return，作为函数返回值。
2、单行箭头函数语法结构可以总结如下：
（1）const 函数名 = 传入的参数 => 函数返回的内容，因此针对const pop = arr => arr.pop()，其中 pop是函数名， arr是传的参数 ， =>之后的内容是函数返回的内容
3、箭头函数与普通函数的区别：
（1）箭头函数是匿名函数，不能作为构造函数，不能使用new
（2）箭头函数不能绑定arguments，取而代之用rest参数...解决
（3）箭头函数没有原型属性
（4）箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值。而普通函数的this指向调用它的对象，this是最大的区别，也就是作用域。
4、ES6语法规定，let声明的变量属于块级作用域，不会挂载在任何对象上。
5、普通函数中，谁调用了函数，this指向谁。由于windows调用了定时器，所以this指向window。
不用箭头函数时，this指向函数的调用者。代码中，定时器在1s后执行，此时是window调用的，所以它里面的this指向的就是window。
箭头函数中的this是在函数创建时就会绑定，例如本代码中，定时器是在getAge方法中创建的，所以它里面的this绑定的就是getAge方法中的this。
6、
箭头函数没有自己的this，它的this是继承而来，默认指向在定义它时所处的对象(宿主对象)。 所以箭头函数内声明的变量实际上相当于在外部声明， 这时候箭头函数内部的this也是指向window的。
