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

╰半橙微兮° 2021-11-30 00:26 435阅读 0赞

{
    
          //    2.箭头函数的this指向在定义的时候继承自外层第一个普通函数的this。
          // 下面栗子中在一个函数中定义箭头函数，然后在另一个函数中执行箭头函数。
          let a,
             barObj = { msg: 'bar的this指向' };
          fooObj = { msg: 'foo的this指向' };
          bar.call(barObj); // 将bar的this指向barObj
          foo.call(fooObj); // 将foo的this指向fooObj
          function foo() {
             a(); // 结果：{ msg: 'bar的this指向' }   （在这里被调用的函数）
          }
          function bar() {
             a = () => {
                console.log(this, 'this指向定义的时候外层第一个普通函数'); // {msg: "bar的this指向"} "this指向定义的时候外层第一个普通函数"
             }; // 在bar中定义 this继承于bar函数的this指向
          }
          // 3.不能直接修改箭头函数的this指向
          // 上个例子中的foo函数修改一下，尝试直接修改箭头函数的this指向。
          let fnObj1 = { msg: '尝试直接修改箭头函数的this指向' };
          function foo1() {
             a.call(fnObj1); // 结果：{ msg: 'bar的this指向' }
          }
          foo1();//{msg: "bar的this指向"} "this指向定义的时候外层第一个普通函数"
          // 很明显，call显示绑定this指向失败了，包括aaply、bind都一样。
          /* 
          SO，箭头函数不能直接修改它的this指向。
    
    幸运的是，我们可以通过间接的形式来修改箭头函数的指向：
    
    去修改被继承的普通函数的this指向，然后箭头函数的this指向也会跟着改变，这在上一个栗子中有演示。
    bar.call(barObj);// 将bar普通函数的this指向barObj 然后内部的箭头函数也会指向barObj
          */
       //   4.箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象)
       /* 
       唔，这个问题实际上是面试官提出来的，当时我认为的箭头函数规则就是：箭头函数的this指向继承自外层第一个普通函数的this，现在看来真是不严谨(少说一个定义的时候)，要是面试官问我：定义和执行不在同一个普通函数中，它又指向哪里，肯定歇菜…
       既然箭头函数的this指向在定义的时候继承自外层第一个普通函数的this，那么：
       当箭头函数外层没有普通函数，它的this会指向哪里？
       这里跟我之前写的this绑定规则不太一样(不懂的可以点进去看一下),普通函数的默认绑定规则是：
       在非严格模式下，默认绑定的this指向全局对象，严格模式下this指向undefined
       如果箭头函数外层没有普通函数继承，它this指向的规则：
       经过测试，箭头函数在全局作用域下，严格模式和非严格模式下它的this都会指向window(全局对象)。
       Tip：测试的时候发现严格模式在中途声明无效，必须在全局/函数的开头声明才会生效：(也就是说'use strict'; // 严格模式无效 必须在一开始就声明严格模式)
       a = 1;
       'use strict'; // 严格模式无效 必须在一开始就声明严格模式
       b = 2; // 不报错
       */
          let yang=()=>{
             console.log(this);//window对象
          }
          // console.log(yang());
       }

文章内容小结：  
普通函数和箭头函数的区别：

箭头函数没有prototype(原型)，所以箭头函数本身没有this  
箭头函数的this在定义的时候继承自外层第一个普通函数的this。  
如果箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象)  
箭头函数本身的this指向不能改变，但可以修改它要继承的对象的this。  
箭头函数的this指向全局，使用arguments会报未声明的错误。  
箭头函数的this指向普通函数时,它的argumens继承于该普通函数  
使用new调用箭头函数会报错，因为箭头函数没有constructor  
箭头函数不支持new.target  
箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名  
箭头函数相对于普通函数语法更简洁优雅  
箭头函数的注意事项及不适用场景  
箭头函数的注意事项：

箭头函数一条语句返回对象字面量，需要加括号  
箭头函数在参数和箭头之间不能换行  
箭头函数的解析顺序相对||靠前  
不适用场景：箭头函数的this意外指向和代码的可读性。  
\---------------------   
作者：阳光下的冷静   
来源：CSDN   
原文：https://blog.csdn.net/m0\_37686205/article/details/88776259   
版权声明：本文为博主原创文章，转载请附上博文链接！