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

前言

今天没有前言 哈哈哈哈

书写方式

• 普通函数

  1. 函数表达式

  const nomalFunc1=function(){}

  const nomalFunc=function nomalFunc1(){}

  2. 函数声明

  function nomalFunc2(){}

  3. 构造函数Function new(冷门方法)

  const nomalFunc3=new Function(){ }

  4. 函数表达式和 函数声明 的区别，为什么函数声明可以在声明前被调用

  函数表达式 不能在声明前被调用，函数声明方式 声明的函数可以在声明前被调用

• 箭头函数
  const arrowFunc=function(){}

应用场景

• 普通函数，有自己的this，arguments，super或new.target

    可以用做构造函数和class函数
  复制代码

• 箭头函数,没有自己的this，arguments，super或new.target

  1. 不能用做构造函数，被new ，想获取 参数 可以用rest
  2. 箭头函数表达式的语法比函数表达式更简洁，箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数 箭头函数对应 MDN解释
  3. 例子：

const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];
console.log(materials.map(material => material.length));
复制代码

this指向

• 普通函数

在调用的时候 确认自己的this指向，基本上是谁调用 this 指向谁（产生执行上下文的时候确定）

• 箭头函数

  1. 函数定义的时候就已经 确认了，没有自己的this

  2. this指向自己被定义的所在作用域，通过作用域链查找离自己最近的this

//aa，bb的this 在定义的时候就指向所在作用域最近的this，这里如果没有 外层表达式声明的函数  就会指向window
const cc={
  value:'cc'
}
const dd=function(){
  console.log(this)
  const aa=()=>{
   console.log('aa里的this',this)
  const bb =()=>{
    console.log('bb里的this',this)

  }
     bb()
}
  aa()
}

dd.call(cc)
复制代码

this修改

• 普通函数

  可以通过call，bind，apply 修改 this指向

window.value='我是window上的 value'
const testObj={
  value:'我是 testObj 上的value'
}
const normalFuncTest=function(){
  console.log(this.value)
}
normalFuncTest()
normalFuncTest.call(testObj)
复制代码

• 箭头函数
  1. this指向不会被修改

window.value='我是window上的 value'
const cc={
  value:'cc'
}
  const aa=()=>{
   console.log('aa里的this',this.value)
  const bb =()=>{
    console.log('bb里的this',this.value)

  }
     bb()
}

aa.call(cc)
复制代码

形参数获取

• 普通函数
  可以通过arguments（类数组的对象，不是数组） 来获取参数

• 箭头函数
  没有arguments 属性 但是可以直接用rest（通过rest 获取的由参数组成的数组形式的参数） 来获取参数

小结

以上就是 普通的函数和箭头函数的区别 ，正因为 箭头 没有自己this，无法修改this，没有super，new所以无法做 构造函数 class