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

2021-06-30 350 阅读2分钟

前言

今天没有前言哈哈哈哈

书写方式

普通函数
1. 函数表达式 const nomalFunc1=function(){}
const nomalFunc=function nomalFunc1(){}
1. 函数声明
  function nomalFunc2(){}
2. 构造函数Function new(冷门方法)
  const nomalFunc3=new Function(){ }
3. 函数表达式和函数声明的区别，为什么函数声明可以在声明前被调用 函数表达式不能在声明前被调用，函数声明方式声明的函数可以在声明前被调用
箭头函数 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