JS箭头函数和普通函数的区别

写在前面

箭头函数是普通函数的简写，而箭头函数和普通函数的差异如下：
1、this指向。箭头函数的this永远指向其上下文的this，没有办法改变其指向；而普通函数的this指向调用它的对象

2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

3、不可以使用 yield 命令（除非是嵌套在允许使用的函数内），因此箭头函数不能用作 Generator 函数。

4、箭头函数在参数和箭头之间不能换行

5、箭头函数是匿名函数，不能作为构造函数，不能使用 new 命令，否则会抛出一个错误，因为：
没有自己的 this，无法调用 call，apply。
没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 proto

1.箭头函数与function定义函数的写法

所有使用var声明的变量都会提升：提升到作用域一开始的位置被声明，该赋值的位置再赋值

//function普通函数
	function fn(a, b){
	    return a + b;
	}
	console.log(fn(1,2))

//arrow function箭头函数
	var foo = (a, b)=>{ return a + b };
	console.log(foo(4,5))

2.this的指向

使用function定义的函数，this的指向随着调用环境的变化而变化的

//使用function定义的函数
	function fn(){
		 console.log(this);
	}
	var obj = { a: fn };
	fn(); //Window
	obj.a() //obj { a: fn }

箭头函数中的this指向是固定不变的，一直指向的是定义函数的环境

//使用箭头函数定义函数
	var fn = () => { console.log(this) };
	var obj = { a:fn };
	fn(); //Window
	obj.a(); //Window

3.构造函数

function是可以定义构造函数的，而箭头函数是不行的

//使用function方法定义构造函数
	function Person(name, age){
	    this.name = name;
	    this.age = age;
	}
	var person =  new Person('张三', 25);
	console.log(person); //{name: '张三', age: 25}

//尝试使用箭头函数
	var Person = (name, age) =>{
	    this.name = name;
	    this.age = age;
	};
	var person = new Person('张三', 25); //Uncaught TypeError: Person is not a constructor

4.变量提升

由于js的内存机制，function的级别最高，而用箭头函数定义函数的时候，需要var(let const定义的时候更不必说)关键词，而var所定义的变量不能得到变量提升，故箭头函数一定要定义于调用之前!!!

//使用function定义的函数
	fn(); //123
	function fn(){
	    console.log('123');
	}

//尝试使用箭头函数
	fn(); //Uncaught TypeError: fn is not a function
	var fn = () => {
	    console.log('456');
	};

5.换行

	var fn = ()
           => 1;	//Uncaught SyntaxError: Unexpected token =>