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的。