箭头函数和function函数的区别

1、定义写法不同

function fn(a, b) {
  return a + b
}

var foo = (a, b) => {
  return a + b
}

2、this指向不同

function函数的this会随着调用环境的不同而改变，而箭头函数的this会始终指向于定义它时的环境。

function foo () {
  console.log(this)
}
var obj = { aa: foo }  // 这里就是一种调用，foo()已经赋值给了aa
foo()  // 打印出Window
obj.aa()  // 打印出obj对象，说明foo()里的consolelog(this)指向了调用它的obj对象

var foo = () => { console.log(this) }
var obj = { aa: foo }
foo()  // Window
obj.aa()  // 同样打印出Window，因为箭头函数一直指向于一开始定义它的foo

3、构造函数

function Person (name, age) {
  this.name = name
  this.age = age
}
var stefan = new Person('Stefan', 24)
console.log(stefan)  // { name: 'Stefan', age: 24 }

var Person = (name, age) => {
  this.name = name
  this.age = age
}
var stefan = new Person('Sefan', 24)  // 类型报错：Person不是一个构造函数

4、变量提升

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

fn()  // Hello function!
function fn () {
  console.log('Hello function!')
}

arrowFn()  // 类型错误：arrowFn不是一个函数
var arrowFn = () => {
  console.log('Hello es6 arrow function!')
}