这一次，彻底搞懂普通函数和箭头函数-CSDN博客

ES6中新加入的箭头函数语法，深受广大开发人员的喜爱，也是平时前端面试过程中经常会被问到的典型题目。在这里，本文就箭头函数与普通函数的区别进行一些分析。希望在您看完这篇文章后，对普通函数和箭头函数的区别及用法有个深刻的认识，以便应用于实际开发中！如果此文对您有帮助，麻烦点个赞^_^

1.箭头函数中的this和普通函数中的this对比：

function a () {
  console.log(this)
}
a()    //window复制代码

这是一个非常普通的函数，因为a是一个全局函数，也就是挂载在window对象下的，所以a()等价于window.a()

let obj = {
  say: function () {
    setTimeout(function () {
      console.log(this)
    })
  }
}
obj.say()      //window复制代码

定时器中的函数，由于没有默认的宿主对象，所以this指向window

let obj = {
  func: function() {},
  say: function () {
    console.log(this)
    setTimeout(function () {
      console.log(this)
    })
  }
}
obj.say()                 //obj   window复制代码

此时say的宿主环境是obj,所以say里面的this是obj,定时器中的函数, 由于没有默认的宿主对象,所以默认this指向window

function test() {
  'use strict'
   console.log(this)}
test() //undefined复制代码

在严格模式下,没有直接调用者的函数中的this就是undefined

"use strict"
let obj = {
  say: function() {
    console.log(this)
  }
}
obj.say() //obj复制代码

在严格模式下,有直接调用者的this是它的调用者

let obj = {
  say: function() {
    setTimeout(() = >{
      console.log(this)
    })
  }
}
obj.say() // obj复制代码

定时器中是一个箭头函数，它的this指向say, say的this也就是直接调用者obj

let obj = {
  say: function() {
    let f1 = () = >{
      console.log(this) 
      setTimeout(() = >{
        console.log(this)
      })
    }
    f1()
  }
}
obj.say() // obj  obj复制代码

首先say中的this指向的是直接调用者obj, f1是个箭头函数，继承自say, 也是obj, setTimeout中的箭头函数this继承自f1，自然也是obj。就是这么一层一层继承下来。

let obj = {
  say: function() {
    let f1 = function() {
      console.log(this) 
      setTimeout(() = >{
        console.log(this);
      })
    };
    f1()
  }
}
obj.say() // window   window复制代码

f1执行的环境是window, 箭头函数内部的this继承f1，所以都是window

let C = (...c) = >{
  console.log(c)
}
C(1, 2, 3, 4); // [1, 2, 3, 4]复制代码

箭头函数没有arguments，取而代之的是用扩展运算符（...）解决

2.箭头函数归纳总结

箭头函数是匿名函数，没有prototype(原型)，所以箭头函数本身没有this, 自然也不能作为构造函数，不能使用new
箭头函数的this是继承而来, 要根据上下文来确定, 默认指向在定义它时所处的对象 (宿主对象)，任何方法都改变不了其指向，如call(), bind(), apply()
箭头函数更适合函数式编程，比如：一些迭代方法：map, filter, reduce等等 (具体请查看基础篇一)它有着更为简洁的表达式，不仅方便书写，且能更为直观的表达语义，同样的，在发起异步请求时, 箭头函数消除了大量callback函数带来的阅读障碍，会是一个优秀的选择。

3.普通函数归纳总结

并不是任何情况下，都适合使用箭头函数。当参数过多，函数体逻辑较复杂时，命名函数使得你的程序更加可读
记住一句话：在普通函数中的this永远它的直接调用者，别管它有多少层调用~。如果没有直接调用者的话，在默认情况下，this指的是window；如果是在严格模式下,没有直接调用者的函数中的this是 undefined

结束~！