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 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
工作失误检讨书范文大全
2014/01/13 职场文书
学生会主席事迹材料
2014/01/28 职场文书
志愿者活动总结
2014/04/28 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
党员作风建设整改方案
2014/10/27 职场文书
同学聚会感言一句话
2015/07/30 职场文书