服务器之家

服务器之家 > 正文

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

时间:2021-07-12 17:34     来源/作者: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变量没有块级作用域,函数中的变量在整个函数都中有效。

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部