箭头函数与普通函数的区别及示例

箭头函数是前端面试环节的一个高频考点，一般会问

1、箭头函数的 this 是指？
2、如何用普通函数实现一个箭头函数
3、箭头函数有哪些优点

带着这些问题，小编带各位上路吧

箭头函数与普通函数得区别

普通函数：
1、函数作为全局函数被调用时，this 指向全局对象
2、函数作为对象中的方法被调用时，this 指向该对象
3、函数作为构造函数的时候，this 指向构造函数 new 出来的新对象

箭头函数
1、箭头函数没有 this，函数内部的 this 来自于父级最近的非箭头函数，并且不能改变 this 的指向

其他补充

普通函数还可以通过 bind 改变 this 的指向

箭头函数示例

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 指向的是最近的一个对象