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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
js上传图片预览的实现方法
May 09 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 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新手用的Insert和Update语句构造类
2012/03/31 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
重新认识php array_merge函数
2014/08/31 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
让焦点自动跳转
2006/07/01 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Python远程方法调用实现过程解析
2020/07/28 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
思想品德课教学反思
2014/02/10 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏