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 相关文章推荐
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
微信小程序删除处理详解
Aug 16 Javascript
简述vue中的config配置
Jan 23 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
收音机指标测试方法及仪器
2021/03/01 无线电
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
PHP pear安装配置教程
2016/05/14 PHP
javascript事件模型代码
2007/07/01 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
python Socket之客户端和服务端握手详解
2017/09/18 Python
Django如何配置mysql数据库
2018/05/04 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
python中栈的原理及实现方法示例
2019/11/27 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
html5教程画矩形代码分享
2013/12/04 HTML / CSS
html5唤起app的方法
2017/11/30 HTML / CSS
2015年电气技术员工作总结
2015/07/24 职场文书
会计岗位工作总结
2015/08/12 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL