进来看！！！箭头函数和普通函数的区别！！！

今天的背景图是樱花，马上就到了一年一度春天的日子，玉渊潭的樱花还有一个月就开了奥

「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。

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

箭头函数

箭头函数🌰
const fn = () => {
  console.log(箭头函数)
}
fn()
//console.log(fn.prototype)undefined 箭头函数没有prototype（原型），所以没有this

写法: 箭头函数都是匿名函数
是否能new: 箭头函数不能作为构造函数，不能new，如果new箭头函数就会报错，因为箭头函数没有constructor
this: 箭头函数的this指向继承外层第一个普通函数的this，被继承的普通函数的this发生了改变那么箭头的this也会随之发生改变，不能直接修改箭头函数的this，以下🌰

var name = bbc
function  fn() {
  this.name = wanzi
  let fn1 = () =>{
    console.log(this.name) //输出wanzi  
  }
  fn1()
}
fn()

如果箭头函数外面没有普通函数，不管是严格模式还是非严格模式都会指向window（全局对象） arguments: 绑定arguments的是否，以下🌰 普通函数下多参数的情况

function  fn(a) {
  console.log(arguments) 
}
fn(a,'wanzi','abc')
//Arguments(3) [HTMLCollection(2), 'wanzi', 'abc', callee: ƒ, Symbol(Symbol.iterator): ƒ]

情况1：箭头函数的this指向了全局，arguments就会报未声明的错误，假设我们声明一个arguments的全局变量，就不会报错，怎么做呢？
↓↓👇🏻看下面
情况2：上面的this指向讲解到指向上一层普通函数的this，那么也等于继承上一层普通函数的arguments

function fn() {
  console.log(arguments); // ['外层第二个普通函数的参数']
  fnc('外层第一个普通函数的参数');
  function fnc() {
    console.log(arguments); // ["外层第一个普通函数的参数"]
    let a = () => {
      console.log(arguments, 'arguments继承this指向的那个普通函数'); // ["外层第一个普通函数的参数"]
    };
    a('箭头函数的参数'); // this指向fnc
  }
}
fn('外层第二个普通函数的参数');

箭头函数下多参数的情况可以采用rest参数，（...扩展运算符）用来获取不定量的参数，是用来替代arguments的
rest参数是一个真正的数组，可以使用数组API

const fn = (...a) => {
  console.log(a)  //[a, wanzi, abc]
}
fn(a,'wanzi','abc')

普通函数

普通函数🌰
function  fn() {
  console.log(普通函数)
}
fn()

写法: 普通函数可以有匿名函数也可以有具体名函数
是否能new: 普通函数可以用来做构造函数，创建对象实例，以下🌰

function Func(name, age){
   this.name = name;
   this.age = age;
}
const obj = new Func('wanzi', 21)
//console.log(obj.name, obj.age) wanzi 21

this: 普通函数的this指向谁调用它就指向谁，但是如何被当做构造函数就指向创建的对象实例

好啦，今天学习一点点🤏🏻，下期再见