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 图片裁剪技巧解读
Nov 15 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
vue组件间通信解析
Mar 01 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 Javascript
原生js 实现表单验证功能
Feb 08 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中变量及部分适用方法
2008/03/27 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
javascript event 事件解析
2011/01/31 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
详解python中sort排序使用
2019/03/23 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python写一个随机点名软件的实例
2019/11/28 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
应届生会计电算化求职信
2013/10/03 职场文书
征婚广告词
2014/03/17 职场文书
工作鉴定评语
2014/05/04 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书