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

• 声明的方式不同，箭头函数声明方式，类似变量声明的方式，如下：

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

  普通函数的声明方式，使用 function 关键字来声明，如下：

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

• this 的指向不同，普通函数，即使用 function 定义的函数，this 的指向会随着调用环境的变化而变化，如下：

  function foo(){
  	console.log(this);
  }
  var obj = { aa: foo };
  foo(); //Window
  obj.aa() // { aa: foo }
  

  箭头函数，this 的指向不会随着调用环境的变化而变化，如下：

  var foo = () => { console.log(this) };
  var obj = { aa:foo };
  foo(); //Window
  obj.aa(); //Window
  

• 普通函数的定义方式可以定义构造函数，但是箭头函数不可以定义构造函数，简而言之，就是使用 function 定义的函数可以使用 new 关键字，但是使用箭头函数方式定义的函数不可以使用 new 关键字，如下：

  // 普通函数
  function Foo(name, age){
  	this.name = name;
  	this.age = age;
  }
  var obj =  new Foo("test", 22);
  console.log(obj); //{name: 'test', age: 22}
  
  // 箭头函数
  var Foo = (name, age) => {
      this.name = name;
  	this.age = age;
  }
  var obj =  new Foo("test", 22); // 会报错，TypeError: Foo is not a constructor
  

• 普通函数的定义方式，可以使得该函数可以先使用，后定义，如下：

  console.log(foo1); // [Function: foo1]
  foo1(); // foo1
  function foo1 () {
  	console.log("foo1");
  };
  

  箭头函数不行，必须先定义，后使用，如下：

   console.log(foo2); // undefined
   foo2(); // TypeError: foo2 is not a function
   var foo2 = () => {
    	console.log("foo2");
   };
  

  这是因为 浏览器引擎 在执行js代码之前，会首先对其进行编译，编译时会找到所有变量（包括普通变量和函数变量）的声明，并且用合适的作用域将他们关联起来，这也是词法作用域的核心。这个预编译过程，会把变量声明和函数声明提升到对应作用域的最顶端。

  所以，上面例子中，普通函数定义方式定义的函数，编译后就是这样：

  function foo1 () {
  	console.log("foo1");
  };
  console.log(foo1); // [Function: foo1]
  foo1(); // foo1
  

  而箭头函数的定义方式，只会提升函数变量的声明，而不会提升 函数表达式，编译后如下：

  var foo2; 
  console.log(foo2); // undefined
  foo2(); // TypeError: foo2 is not a function
  foo2 = () => {
    	console.log("foo2");
   };
  

  同理，如果普通函数通过 函数表达式 的方式定义，输出结果与 foo2 一样，如下：

  console.log(foo2); // undefined
   foo2(); // TypeError: foo2 is not a function
   var foo2 = function () {
    	console.log("foo2");
   };
  

标签：function,console,log,区别,箭头,foo1,foo2,函数
来源： https://www.cnblogs.com/upward-lalala/p/14753016.html