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

概述

我们在学习js的时候经常会跟函数打交道,其中普通函数和箭头函数是用的比较多的2种,很多同学并不清楚二者的区别,这里我们花一些时间讨论一下。

作用域

在讨论箭头函数与普通函数的区别之前,我们需要先讨论一下作用域的概念。作用域分为:全局作用域,局部作用域,块级作用域

  • 全局作用域
    •   全局作用域是在整个代码中都可访问的作用域。
  • 局部作用域
    •   局部作用域一般代指函数作用域(Function Scope),它是在函数内部声明的作用域,函数内部的变量和函数只能在函数内部访问,外部无法直接访问
  • 块级作用域
    •   块级作用域是在代码块(通常是由大括号{}包裹起来的部分)内声明的作用域。比如if(){...}、for(...){...}、try{...}等
  • 示例
    <script type="text/javascript">
            // 全局作用域
            const global_a="我是全局作用域";
            const b=function()
            {
                const local_b="我是局部作用域";
                try{
                    const block_c="我是块级作用域";
                    console.log(block_c);
                }
                catch(ex)
                {
    
                }
                console.log(global_a);
                console.log(local_b);
            }
            b();
        </script>

     

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

 

  1. 语法的不同

    • 箭头函数语法:箭头函数由 小括号()、箭头=》、大括号{}组成,例如(x)=>{ return 2*x;},  (x)=> 2*x...  ,其中括号和大括号依情况可以省略
    • 普通函数语法:普通函数由关键字function、小括号、大括号{}组成,例如:function(x)=>{return 2*x;}
  2. this绑定的不同

    • 箭头函数没有自己的this绑定,它会继承外层作用域的this值(继承规则:向外层作用域中, 一层层查找this, 直到有this的定义)。而普通函数的this值是根据调用时的上下文决定的。这里给出一些示例
      • <div>
                <button id="bt1">利用箭头函数构造事件处理函数</button>
                <button id="bt2">利用普通函数构造事件处理函数</button>
            </div>
            <!-- 箭头函数没有自己的this绑定,它会继承外层作用域的this值。而普通函数的this值是根据调用时的上下文决定的 -->
            <script type="text/javascript">
                const bt1 = document.querySelector("#bt1");
                const bt2 = document.querySelector("#bt2");
                // 这里有两个点击事件,一个绑定的事件处理函数为普通函数,一个为箭头函数
         
                bt2.addEventListener("click", function() {
                    //这里的this是id="bt2",this指向调用这个函数的对像
                    console.log(this);
                });
         
                bt1.addEventListener("click", () => {
                    //这里的this是window,箭头函数的this指向最近的外层作用域中的this所指对象
                    console.log(this);
                });
            </script>
        <div>
                <button id="bt1">利用箭头函数构造事件处理函数</button>
                <button id="bt2">利用普通函数构造事件处理函数</button>
            </div>
            <!-- 箭头函数没有自己的this绑定,它会继承外层作用域的this值。而普通函数的this值是根据调用时的上下文决定的 -->
            <script type="text/javascript">
                const obj = {
                    a() {
                        setTimeout(function() {
                            //因为是window对象调用了定时函数,所以这里的this是window
                            console.log(this);
                        })
                    },
                    b() {
                        setTimeout(() => {
                            //因为箭头函数里的this指向了最近的外层函数作用域中,所以这里的this是obj对象
                            console.log(this);
                        })
                    }
                }
                obj.a(); // 打印出 Window
                obj.b(); // 打印出 当前对象obj
        
            </script>

         

  3. 构造函数:箭头函数不能用作构造函数,不能使用new关键字实例化对象。普通函数可以被用作构造函数创建对象实例

  4. arguments对象:箭头函数没有自己的arguments对象,它会继承外层作用域的arguments对象。普通函数则会创建自己的arguments对象

  5. 箭头函数没有原型属性(prototype)

  6. 箭头函数不能通过call()、apply()或bind()方法来改变this的指向

总结

普通函数比较灵活,适用于各种场景,包括作为构造函数、改变this指向等。而箭头函数更适合用于简单的函数表达式和回调函数,需要根据具体的使用场景和需求来选择使用箭头函数还是普通函数。

 

热门相关:娘娘每天都在洗白   帝少宠妻有点甜   99次离婚:厉少,请低调   视死如归魏君子   纣临