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 相关文章推荐
图片完美缩放
Sep 07 Javascript
javascript CSS画图之基础篇
Jul 29 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 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 获取全局变量的代码
2011/04/21 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
python不换行之end=与逗号的意思及用途
2017/11/21 Python
Python中django学习心得
2017/12/06 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
利用Python实现kNN算法的代码
2019/08/16 Python
PyTorch的torch.cat用法
2020/06/28 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
百度吧主申请感言
2014/01/12 职场文书
追悼会主持词
2014/03/20 职场文书
中学生学习保证书
2015/02/26 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers