ES6箭头函数与普通函数的区别

随着ES6的在JS开发中的广泛运用，我们已经习惯性的在代码中使用它的一些新特性。而箭头函数作为使用频率较高的一个ES6新特性，在我们的代码中基本上是随处可见了。

要合理的使用箭头函数就需要弄清楚它与普通函数有什么区别，只有了解了它们存在的差异，才能在使用时更加的合理，即功能与需求契合完好。

那么用function定义的普通函数和箭头函数之间究竟存在哪些差异呢？下面就来讲讲它们的差异，方便自己想不起来的时候查阅，也可以给正在学习这门语言的道友解答一下疑问。若有纰漏，还望各位指正，不胜感激。

那么下面进入正题。

在ES6没有出现之前，我们定义函数通常是这样的:

function fun() {
    // 具体代码
} 

// 或者是这样
var fun = function() { 
    // 具体代码
}

我们在函数内部的具体代码中经常会使用到this这个值。这个值是什么呢？我之前在学习的时候看了一些网上的资料，有人说this是函数定义的域(也就是定义在哪个对象上)，这个值在定义的时候就确定了，后来在使用bind、apply、call的时候，我发现并不是这样的，因为它们改变了原函数中this的指向。之后我查阅了一些书籍资料后，发现this并不是在定义的时候就确定的，而是在调用的时候确定的，也就是谁调用这个函数，this就指向谁，我觉得这才更符合实际的this定义。比如说:

function a(){
    console.log(this);
}

a(); //Window对象

// 这里的a() 实际上时window对象调用的 具体如下：
function b(){
    console.log(this);
}

window.b(); //Window // 实际上a()等价于window.a()，只不过默认可以省略window.罢了

var obj = {};

a.apply(obj); // {}

// 这里我们运用apply函数，用obj来调用a函数，结果输出的是空对象obj

由此可见，普通函数中的this应该是在调用时确定的，而不是定义的时候就确定的，即普通函数被谁调用，this就指向谁。

那么下面开始讲讲普通函数和箭头函数的差异:

1.箭头函数中的this与它所处作用域有关

var obj= {
    fun1:function(){
        console.log(this);
    },
    fun2:function(){
        return function(){
            console.log(this);
        }
    }
}

obj.fun1(); // obj
obj.fun2()(); // window
// 这里obj.fun2()() 等价于 window.obj.fun2()()

那么如果把fun2里的普通函数换成箭头函数会怎么样呢？

var obj= {
    fun1: function(){
        console.log(this);
    },
    fun2: function(){
        return () => {
            console.log(this);
        }
    }
}

obj.fun1(); // obj
obj.fun2()(); // obj

// 由此可见，箭头函数中的this继承了它所在的作用域的this

2.普通函数中有arguments，箭头函数中没有，而是用三点运算符替代

// 普通函数
function a(params) {
    console.log(arguments[0]);
}

a(1); // 输出： 1

// 箭头函数
var a = (params) => {
    console.log(arguments);
}

a(1); // 报错：arguments is not defined

// 替代方式：
var a = (...arg) => {
    console.log(arg[0]);
}

a(1); // 输出：1

3.箭头函数不能和new一起使用，但普通函数可以

// 普通函数列子略 ··· 

// 箭头函数

var fun = () => {};

var fun1 = new fun(); //fun is not a constructor

// 原因是箭头函数不能作为构造器使用

4.箭头函数没有原型prototype，但是普通函数有

// 普通函数
function fun() {};
console.log(fun.prototype) // {constructor: ƒ...}

// 箭头函数
var fun = () => {};
console.log(fun.prototype) //undefined

那么以上就是我自己觉得箭头函数和普通函数比较重要的几个差异，当然还有一些其他差异，这里就没有都一一列出来了。

由此可见，在使用箭头函数的时候还是有很多地方要注意的，一旦滥用箭头函数很可能让自己的代码陷入困境。