zoukankan      html  css  js  c++  java
  • JS中如何生成全局变量

    JS中如何生成全局变量

    一、总结

    一句话总结:在函数内部,一般用var声明的为局部变量,没用var声明的一般为全局变量

    在函数内没用var声明的一般为全局变量

    1、js中的函数中的this指向的是谁?

    函数的调用者 window对象

    指向的是函数的调用者,在这里也就是window对象

    1 <script>
    2     //===========题目列表信息全局变量
    3     //显示的题目的编号
    4     showQuestionNum={$question_list['info']['now_question_num']};
    5     //题目总数
    6     totalQuestionNum={$question_list['info']['question_num']}
    7 </script>
     1 <script>
     2     //上一题下一题逻辑
     3     function getQuestionAbove(){
     4         if(parseInt(this.showQuestionNum)>1) this.showQuestionNum=parseInt(showQuestionNum)-1;
     5         showQuestion(showQuestionNum);
     6     }
     7     function getQuestionBelow(){
     8         if(parseInt(this.showQuestionNum)<parseInt(totalQuestionNum)) this.showQuestionNum=parseInt(showQuestionNum)+1;
     9         showQuestion(showQuestionNum);
    10     }
    11 </script>

    2、下面程序的结果是多少?

    100  10  100

    |||-begin

    var a = 10;
    function test(){
        a = 100;
        console.log(a);
        console.log(this.a);
        var a;
        console.log(a);
    }
    test();

    |||-end

    程序的运行结果为:100  10  100

    解析:Javascript在执行前会对整个脚本文件的声明部分做完整分析(包括局部变量),从而确定变量的作用域,所以在函数test执行前,由于第6行声明了局部变量a,所以函数内部的a都指向已经声明的局部变量,所以第4行输出100。第5行输出this.a,我们都知道,函数内部的this指针指向的是函数的调用者,在这里函数test被全局对象调用,所以this指针指向全局对象(这里即window),所以this.a = window.a,一开始生命了全局变量a=10,所以第5行输出结果为10。第7行输出结果为100,因为局部变量a在第3行已经被赋值了100,所以直接输出局部变量a的值。

    3、下面程序运行的结果是多少?

    undefined  10

    |||-begin

    var a = 100;
    function test(){
        console.log(a);
        var a = 10;
        console.log(a);
    }
    test();

    |||-end

    程序的运行结果为:undefined  10

    解析:看了第1个例子,可能有同学会认为输出结果是10  10,但是结果却不是10 10,为什么呢?仔细看第1个例子解析的第一句话,Javascript在执行前会对整个脚本文件的声明部分做完整分析(包括局部变量)但是不能对变量定义做提前解析,在这个函数中,执行第3行前,可以认为已经声明了变量a,但是并没有定义(这里即赋值),所以第3行输出结果为undefined,执行第4行a =10后,变量a的值就为10,所以第5行输出结果为10。

    4、下面程序运行的结果是多少?

    100  10  10

    |||-begin

    1 var a = 100;
    2 function test(){
    3     console.log(a);
    4     a = 10;
    5     console.log(a);
    6 }
    7 test();
    8 console.log(a);

    |||-end

    程序的运行结果为:100  10  10

    解析:我们知道在函数内部,一般用var声明的为局部变量,没用var声明的一般为全局变量,在test函数内,a=10声明了一个全局变量,所以第3行的a应该输出全局变量的值,而在函数执行之前已经声明过一个全局变量并赋值100,所以这里第上输出100。第4行给全局变量a 重新赋值10,所以全局变量a的值变成10,所以第5行输出10。而在函数test外部,第8行输出全局变量a的值,因为全局变量被重新赋值为10,所以输出结果即为10。

    二、JS中最经典的全局变量和局部变量问题

    参考:JS中最经典的全局变量和局部变量问题
    https://www.cnblogs.com/yxz-turing/p/4735934.html

    话不多说,直接上例子:

    1、程序的运行结果为:100  10  100

    1 var a = 10;
    2 function test(){
    3     a = 100;
    4     console.log(a);
    5     console.log(this.a);
    6     var a;
    7     console.log(a);
    8 }
    9 test();

    解析:Javascript在执行前会对整个脚本文件的声明部分做完整分析(包括局部变量),从而确定变量的作用域,所以在函数test执行前,由于第6行声明了局部变量a,所以函数内部的a都指向已经声明的局部变量,所以第4行输出100。第5行输出this.a,我们都知道,函数内部的this指针指向的是函数的调用者,在这里函数test被全局对象调用,所以this指针指向全局对象(这里即window),所以this.a = window.a,一开始生命了全局变量a=10,所以第5行输出结果为10。第7行输出结果为100,因为局部变量a在第3行已经被赋值了100,所以直接输出局部变量a的值。

    2、程序的运行结果为:undefined  10

    1 var a = 100;
    2 function test(){
    3     console.log(a);
    4     var a = 10;
    5     console.log(a);
    6 }
    7 test();

    解析:看了第1个例子,可能有同学会认为输出结果是10  10,但是结果却不是10 10,为什么呢?仔细看第1个例子解析的第一句话,Javascript在执行前会对整个脚本文件的声明部分做完整分析(包括局部变量),但是不能对变量定义做提前解析,在这个函数中,执行第3行前,可以认为已经声明了变量a,但是并没有定义(这里即赋值),所以第3行输出结果为undefined,执行第4行a =10后,变量a的值就为10,所以第5行输出结果为10。

    3、程序的运行结果为:100  10  10

    1 var a = 100;
    2 function test(){
    3     console.log(a);
    4     a = 10;
    5     console.log(a);
    6 }
    7 test();
    8 console.log(a);

    解析:我们知道在函数内部,一般用var声明的为局部变量,没用var声明的一般为全局变量,在test函数内,a=10声明了一个全局变量,所以第3行的a应该输出全局变量的值,而在函数执行之前已经声明过一个全局变量并赋值100,所以这里第上输出100。第4行给全局变量a 重新赋值10,所以全局变量a的值变成10,所以第5行输出10。而在函数test外部,第8行输出全局变量a的值,因为全局变量被重新赋值为10,所以输出结果即为10。

    如有错误的地方欢迎批评指正

     
  • 相关阅读:
    css text-transform 属性
    CSS3 @media编写响应式页面
    css :first child与:first-of-type的区别
    前端外语网站合集
    webpack配置自动添加CSS3前缀
    vue中extend/component/mixins/extends的区别
    js缓动函数
    [LeetCode] 78. 子集
    [LeetCode] 76. 最小覆盖子串
    [LeetCode] 75. 颜色分类
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/10655271.html
Copyright © 2011-2022 走看看