当前位置: 首页 > 编程笔记 >

JavaScript 学习笔记之变量及其作用域

卢骏俊
2023-03-14
本文向大家介绍JavaScript 学习笔记之变量及其作用域,包括了JavaScript 学习笔记之变量及其作用域的使用技巧和注意事项,需要的朋友参考一下

一、变量

ECMAscript变量是松散型变量,所谓松散型变量,就是变量名称可以保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符。

定义:var firstDemo;

二、变量的作用域

2.1基本概念

使用var 定义变量:定义该变量的作用域的局部变量,这种定义变量的方法也被成为显式声明。

这么说不理解的话可以看看下面这个简单粗暴的例子:


test();

function test(){

var firstDemo="hello";//定义局部变量

    alert(firstDemo);//hello

}

 test();

 function test(){

    var firstDemo="hello";//定义局部变量firstDemo            

 }    

 alert(firstDemo);//报错,firstDemo is not define

由以上两个例子可以看出,如果在一个函数中使用var 定义一个变量,那么该变量在函数退出后会被销毁。

省略var 定义变量:只要调用一次定义该变量的函数,全局范围内都可访问该变量。这种定义变量的方法也被成为隐式声明


 <script type="text/javascript">

        test();

        alert(firstDemo);   //hello 

        function test(){

             firstDemo="hello";            

        }        

    </script>

tips:显式声明的变量是在预编译时就已经编译到调用对象中了,(例如var t=1;预编译时执行var t;解释时执行t=1;)不同于隐式声明变量在解释时才被定义为全局变量。

弄清楚变量的作用域,可以帮助我们思考如何合理声明变量,这样既减小了不必要的内存开销,同时能很大程度地避免变量重复定义而覆盖先前定义的变量所造成的麻烦。

2.2作用域分析


<script type="text/javascript">

    function demoFunction(s){ 

        document.writeln(s) 

    } 

    var i=0; //定义全局变量 

    function test(){ 

        demoFunction(i); 

        function innerFunction(){ 

            var i = 1; //定义局部变量 

            demoFunction(i); 

        } 

        innerFunction(); 

        demoFunction(i); 

   } 

   test();    

</script>

输出结果:0 1 0


<script type="text/javascript">

  function demoFunction(s){ 

    document.writeln(s) 

} 

  var i=0; 

  function test(){ 

    demoFunction(i); 

    function innerFunction(){ 

      demoFunction(i); 

      var i=1; 

    demoFunction(i);

    } 

    innerFunction(); 

    demoFunction(i);

} 

test();

</script>

输出结果:

A、0 0 1 0

B、0 undefined 1 0

C、0 报错i is not defined

各位可以猜测一下结果是哪一个,原因会在留言里详解。

以上就是本文的全部内容了,简单的说任何程序语言中变量的作用域都是一个很关键的细节。JS中变量的作用域相对与JAVA、C这类语言显得更自由,一个很大的特征就是JS变量没有块级作用域,函数中的变量在整个函数都中有效。

 类似资料:
  • 本文向大家介绍JavaScript 学习笔记之操作符,包括了JavaScript 学习笔记之操作符的使用技巧和注意事项,需要的朋友参考一下 一、一元操作符 1、自增自减操作符:分为前置型和后置型; 前置型:++a;--a; 后置型:a++;a--; 例: 其中a=i++,相当于a=i;i=i+1; 而b=++j,相当于j=j+1;b=j; 2、一元加减操作符:a=+i;a=-i; 对整数而言,一元

  • 本文向大家介绍JavaScript学习笔记之JS函数,包括了JavaScript学习笔记之JS函数的使用技巧和注意事项,需要的朋友参考一下 函数就是包裹在花括号中的代码块,前面使用了关键词function: 函数参数   函数的参数可以任意多个,不用声明变量类型,只用给出变量名: 函数返回值   在函数中使用return语句,函数会停止执行,返回调用它的地方。   函数的返回值也不用声明类型,直接

  • 本文向大家介绍JavaScript学习笔记之JS对象,包括了JavaScript学习笔记之JS对象的使用技巧和注意事项,需要的朋友参考一下 默认对象   日期对象Date,   格式:日期对象名称=new Date([日期参数])   日期参数:   1.省略(最常用);   2.英文-数值格式:月 日,公元年 [时:分:秒]   如:today=new Date("October 1,2008

  • 本文向大家介绍JavaScript学习笔记之Cookie对象,包括了JavaScript学习笔记之Cookie对象的使用技巧和注意事项,需要的朋友参考一下 JavaScript Cookie   Cookie对象:   Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cookie数据)。   Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web

  • 本文向大家介绍JavaScript学习笔记之DOM操作实例分析,包括了JavaScript学习笔记之DOM操作实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考,具体如下: 一、DOM概念 1. "D":Docment,指的是文档 2. “O”:Object,指的是对象,在javascript有三种对象:用户定义对象、内建

  • 本文向大家介绍JavaScript学习笔记之基础语法,包括了JavaScript学习笔记之基础语法的使用技巧和注意事项,需要的朋友参考一下 JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括:   各种算术运算符、比较运算符、逻辑运算符;   if else语句、switch语句;   for循环、while循环、do while循环;   标签、brea