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调用WebService的示例
Apr 07 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
JS实现简易计算器
Feb 14 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 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+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
layui表格设计以及数据初始化详解
2019/10/26 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
python根据日期返回星期几的方法
2015/07/06 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
期中考试后的反思
2014/02/08 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
财务会计专业求职信
2014/06/09 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL