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


Posted in Javascript onJanuary 14, 2015

一、变量

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 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
js获取和设置属性的方法
Feb 20 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
js实现分页功能
May 24 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 #Javascript
Node.js开发之访问Redis数据库教程
Jan 14 #Javascript
Backbone.js中的集合详解
Jan 14 #Javascript
jquery增加和删除元素的方法
Jan 14 #Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 #Javascript
jQuery中Ajax的load方法详解
Jan 14 #Javascript
jquery获取当前日期的方法
Jan 14 #Javascript
You might like
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
javaScript语法总结
2016/11/25 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
小程序云开发实战小结
2018/10/25 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
Python接口测试get请求过程详解
2020/02/28 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
Python类super()及私有属性原理解析
2020/06/15 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
python实现图片转字符画的完整代码
2021/02/21 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
怎样有效的进行自我评价
2013/10/06 职场文书
授权委托书协议书
2014/10/16 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
离职信范文
2015/06/23 职场文书
员工手册董事长致辞
2015/07/29 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android