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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
JavaScript实现单图片上传并预览功能
Sep 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
玩转虚拟域名◎+ .
2006/10/09 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
jquery 学习笔记一
2010/04/07 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
Python多线程原理与用法详解
2018/08/20 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python中Lambda表达式详解
2019/11/20 Python
用python解压分析jar包实例
2020/01/16 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
土木工程师岗位职责
2013/11/24 职场文书
教师开学感言
2014/02/14 职场文书
委托公证书
2014/04/08 职场文书
关于保护环境的建议书
2014/05/13 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
MySQL中的隐藏列的具体查看
2021/09/04 MySQL