『Javascript基础重点』2.易错点之函数形参与函数作用域的坑

---

欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
介绍一些Javascript的基础重点知识，包括并不限于函数作用域与提前声明和对象的构造函数等问题。

函数形参与函数作用域的坑

先介绍一些基础知识，有基础的同学可以直接看后面的例程。
注意，本文讨论的变量不包括引用类型。js引用数据类型有:Object、Array、Function。

1.1 函数形参

      a = 1;
      function mzh(a) {
        var a = 123;
      }
      mzh();

上段代码中的mzh函数中的参数(a)就是形式参数。
定义了形参后函数中会优先使用自身内部var定义的形参，a123和a1两个a虽然名字一样，但是是2个参数。

1.2 函数作用域

函数的作用范围，本文只是简单分为全局变量，局部变量。一般情况下，函数内部var定义的与外部变量同名的变量只是在本函数内作用，不会对外部变量产生影响，

---

2. 函数内部var定义变量对函数外部同名变量的影响

对于var的声明提前问题可以在我的上一篇博文中查看
1.提前声明问题，你苦恼写了js函数代码但是不会生效的问题吗？

2.1函数内部var定义变量不会影响外部同名变量

    <script type="text/javascript">
      var a = 1;
      function mzh() {
        var a = 123;//这里用var定义a是函数内部的局部变量a
        alert("函数内部的a:" + a); //123
      }
      mzh();
      alert("函数外部的a:" + a); //1
    </script>

2.2函数内部非var定义变量会影响外部同名变量

    <script type="text/javascript">
      var a = 1;
      function mzh() {
        a = 123; //这里非var给a这个外部的全局变量赋值a
        alert("函数内部的a:" + a); //123
      }
      mzh();
      alert("函数外部的a:" + a); //123
    </script>

---

3. 引入形参后的影响

函数定义中的等价 “mzh(a)” == “var a;”+外部函数的参数赋值给内部的a，可以类比为2.1节中的内容。
函数定义的形参相当于已经是var定义的参数了，自然不会对外部变量产生影响。

3.1 带形参没有实际传参

    <script type="text/javascript">
      //带有形参内部var定义a
      var a = 1;
      //函数定义中的等价       “mzh(a)” == "var a;"+外部函数的参数赋值给内部的a
      function mzh(a) {
        alert("函数传入的a:" + a); //a:undefined
        a = 123; //这个a看似是全局变量的定义形式，按照之前的逻辑应该会让外部的a赋值为123，实际上这个a是对于函数内部形式参数a的赋值，也就是不会影响外部变量
      }
      mzh(); //虽然函数定义有形参a，但是这个实际调用函数时并没有传入形参a
      alert("函数外部的a:" + a); //1
    </script>

3.2 带形参实际传参

    <script type="text/javascript">
      //带有形参内部var定义a
      var a = 1;
      //函数定义中的等价       “mzh(a)” == "var a;"+外部函数的参数赋值给内部的a
      function mzh(a) {
        alert("函数传入的a:" + a); //a:111111
        a = 123; //这个a看似是全局变量的定义形式，按照之前的逻辑应该会让外部的a赋值为123，实际上这个a是对于函数内部形式参数a的赋值，也就是不会影响外部变量
      }
      mzh(111111); //虽然函数定义有形参a，但是这个实际调用函数时并没有传入形参a
      alert("函数外部的a:" + a); //1
    </script>

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2023 mzh

Crated：2023-3-1

欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
『1.提前声明问题，你苦恼写了js函数代码但是不会生效的问题吗？』
『2.易错点之函数形参与函数作用域的坑』
『3.了解原型对象优雅地构造函数の“JS中的Java继承” 提高运行效率，优雅地使用对象』
『4.JS垃圾回收机制简析』
『5.以toString()为例学习JS中的java方法重写』
『6.数组的常用方法与数组遍历』
『7.函数进阶之call()和apply()与arguments』
『8.Date类与利用时间戳来测试代码的执行的性能』
『9.Math类方法』
『10.包装类』
『11.字符串的方法』
『12.正则表达式介绍 邮件正则表达式写法』
『13.dom的应用』
『未完待续』

---