普通函数与箭头函数的区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了普通函数与箭头函数的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

概述

我们在学习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>

文章来源地址https://www.toymoban.com/news/detail-844249.html

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

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

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>