js函数和变量的声明与执行顺序

朴灿烈づ我的快乐病毒、 2022-01-23 11:17 216阅读 0赞

[原文地址：][Link 1][https://www.cnblogs.com/highshao/p/5442460.html][Link 1]

### **一、函数执行顺序** ###

1、正常顺序

function f(){
                 alert(2);
           }
           f();        //alert 2

所有浏览器都能测试通过。

2、倒序调用

f();        //alert 2
             function f(){
                 alert(2);
             }

之前一些浏览器会报undefined，不过，目前的版本大多都可以了。

3、含参函数倒序

f(2);        //alert 2
             function f(a){
                 alert(a);
             }

目前主流浏览器一样可以正常测试通过。

4、声明式函数和赋值式函数

1         f();                        // 2
    2         function f() {              // 声明式函数
    3             console.log(2);
    4         }
    5         f1();                       // Uncaught TypeError: f1 is not a function
    6         var f1 = function () {      // 赋值式函数
    7             console.log(2);
    8         }

声明式函数与赋值式函数的区别在于：在JS的预编译期，**声明式函数**将会先被提取出来，然后才按顺序执行js代码。

### **二、变量执行顺序** ###

1、正常顺序

var a  =2;
             alert(a);       //alert 2

2、倒序使用变量

alert(a);       //alert undefined
             var a  =2;

在变量未定义之前使用，会返回undefined。

3、局部变量的执行

\***注意**：js中全局var声明的为全局变量  函数体内var声明为局部变量（函数外部访问不到）但是，函数体内未用var声明的为全局变量（函数外部可以使用）。

function f(){
                 alert(a);
                 a = 3;
             }
             f();       //error: a is not defined

这里Firefox的控制台中会报错ReferenceError（引用错误）：a 未被定义。。。。所以建议函数体内最好用var声明变量，保持局部性如：

function f(){
                 alert(a);
                 var a = 3;
             }
             f();        //undefined

这里alert语句可以弹出，虽然是undefined ，但是没有报错，这是为什么呢？？

事实上，JS的解析过程分为两个阶段：**预编译期(预处理)**与**执行期**。

**预编译期 **JS会对本代码块中的所有**var**声明的变量和函数进行处理（类似与C语言的编译），但需要注意的是此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值。

**执行期 **会按照代码块的顺序逐行执行。。

\*函数内部的变量再次声明赋值，函数f()内有局部变量a时，会优先使用自己的变量，只不过第一次alert时未赋值。

var a = 1;
             function f(){
                 alert(a);   
                 var a = 3;
                 alert(a);
             }
     
             f();        //undefined 和 3

\*函数内部 再次全局声明，会修改全局的a。

var a = 1;
             function f(){
                 alert(a);
                 a = 2;
                 alert(a);
             }
             f();        //1 和 2

\*函数内全局赋值一次，var声明一次    函数f()内还是会优先使用自己的变量a。

var a = 1;                 //           函数f()内变量a的执行顺序
            function f(){
                alert(a);               
                a = 2;                 //                    #2   
                alert(a);           
                var a = 3;             //等价于 var a ;       #1
                                       //      a = 3 ;       #3
                alert(a);
            }
           
            f();                //undefined 2 和 3
            alert(a);       //1

函数f()内 变量a 声明与赋值 的执行顺序如上，应该很明确了！！

### \*一个经典的例子复习一下： ###

var a,b;
                  (function(){
                      alert(a);          //undefined
                      alert(b);          //undefined
                      var a=b=3;             //等价于 var a = 3 ; b = 3; b是全局的
                      alert(a);          //3
                      alert(b);          //3
                  })();
                  alert(a);              //undefined
                  alert(b);              //3

### **三、总结** ###

1、JS的解析过程分为两个阶段：**预编译期(预处理)**与**执行期**。

预编译期 JS会对**本代码块**（两个script块互不影响）中的所有**var**声明的**变量**和**函数**进行处理（类似与C语言的编译）

此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值。

执行期 会按照代码块的顺序筑行执行

2、把执行方法写在函数定义之前是不太规范的，但这个界限被弱化了。如今在一个作用范围之内，都可以被正常调用。

所以，建议和优化如下：

1.**函数体内变量最好var声明为局部，保持安全性和局部性。**

2.**所有变量的声明最好一次性写在作用域的顶端**，函数不必需如此，如：

function f(){
                      var a, b, c;
     
                      a = "abc";
                      b = [1,3,1];
                      c = 12;
                  }

3.**函数的执行方法最好在函数的定义之后。**

[Link 1]: https://www.cnblogs.com/highshao/p/5442460.html