箭头函数

基本用法

在ES6中容许使用 => 来定义函数，以下：

var f = a => a;
    console.log(f(1)); //1

就等同于

var f = function(a){
         return a;
    }
    console.log(f(1)); //1

从上面能够看出，在箭头左侧的是表明参数，若参数只有一个，()能够省略，箭头右侧的表示函数代码块，若代码块里面是个返回值，则{}能够省略不写

1.无参数状况

若箭头函数不须要参数，则左侧用()代替，以下：

var f = () => {
      console.log("无参数状况");
   }
    f();//无参数状况

2.有参数状况

var f = (a, b) => {
        return a+b;
   }
    console.log(f(1,2)); //3

var f = a => a;
 console.log(f(1)); //1

若是箭头函数有参数，则须要用()括起来，若只有一个参数，括号能够省略不写

在这里要注意一个状况，就是当箭头函数直接返回一个对象的时候，以下：

var f = () => {name:'liming', age:22}; //报错
    console.log(f());

这样写确定是报错的，由于{}执行时变成代码块，会去运行代码，因此要用一个()括起来才能够，以下:

var f = () => ({name:'liming', age:22}); 
console.log(f());

执行结果为：

{name: "liming", age: 22}

以上这个写法才是正确的

箭头函数注意点

1.this指向

var a = '全局变量a';
    var obj={
        a:'局部变量a',
        fn1:function(){
            console.log(this.a);
        },
        fn2:()=>{
            console.log(this.a);
        }
    }
    obj.fn1();
    obj.fn2();

输出结果为：

局部变量a
全局变量a

普通函数的this咱们知道是指向最近的一个对象，而箭头函数的this其实是指向定义时的this，好比把上面代码改成：

var obj={
        a:'局部变量a',
        fn1:function(){
            console.log(this.a);
        },
        fn2:()=>{
            console.log(this.a);
        }
    }
    obj.fn1();
    obj.fn2();

输出结果为：

局部变量a
undefined

此时由于箭头函数是指向全局的，全局没有变量a则输出undefined,这里的fn1和fn2都是全局函数，因此箭头函数this指向的是定义时的全局，而普通函数的this指向的是最近的一个对象

上面若是那个例子不太明白，能够再看下以下例子：

this.a = '全局a';
    function Timer() {
         this.a = 'timer中的a';
        // 普通函数
        setTimeout(function () {
            console.log('普通函数:', this.a);
        });

        // 箭头函数
        setTimeout(() => {
            console.log('箭头函数:',this.a);
    });
    }
   new Timer();

输出结果为：

普通函数: 全局a
箭头函数: timer中的a

这里普通函数会指向全局是由于，距离普通函数最近的对象是setTimeOut,而setTimeOut是挂在全局做用域中，因此普通函数指向全局，箭头函数指向的是定义时的对象，箭头函数是在Timer中定义的，因此箭头函数指向Timer

若是把以上代码改成以下：

this.a = '全局a';
    function Timer() {
         this.a = 'timer中的a';
        // 普通函数
        setTimeout(function () {
            console.log('普通函数:', this.a);
        });

        // 箭头函数
        setTimeout(() => {
            console.log('箭头函数:',this.a);
    });
    }
   Timer();

输出结果：

普通函数: timer中的a
箭头函数: timer中的a

这个是为何呢，由于若是是new Timer至关因而构造函数，构造了一个对象，若是是Timer()就至关因而调用函数Timer()这二者仍是有区别的，若是是调用函数Timer()，这个时候this的指向都是全局，在局部修改this.a会覆盖全局的this.a

经过以上，咱们能够知道普通函数跟箭头函数this指向的区别是：

普通函数： this指向最靠近的一个对象

箭头函数： this指向定义时的对象，也就是说箭头函数一旦定义完成，它的指向是固定的，无法改变，它的指向是定义时所在的做用域，而不是执行时的做用域

2.不能够当作构造函数

箭头函数不能够当作构造函数，也就是不能够new一个，不然会报错，以下：

var fn = ()=>{
        console.log("123");
    }
    new fn(); //Uncaught TypeError: fn is not a constructor

以上会报错，由于箭头函数自己没有属于本身的this，因此箭头函数不能够当作构造函数，也由于箭头函数没有本身的this，因此call()、apply()、bind()这些方法去改变this的指向对箭头函数也是无效的，以下：

this.x = 'outer';
    (function() {
        console.log([
            (() => this.x).bind({ x: 'inner' })()
        ]);
    })();

输出结果为：

["outer"]

把箭头函数经过bind绑定可见无效，箭头函数仍是指向全局

以上是我的总结，有什么不足之处欢迎留言探讨！