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中的Location地址对象
Jan 16 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
js键盘事件的keyCode
Jul 29 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
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
简单采集了yahoo的一些数据
2007/02/14 PHP
实用函数7
2007/11/08 PHP
smarty中post用法实例
2014/11/28 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
vuex 的简单使用
2018/03/22 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python字符串替换的2种方法
2014/11/30 Python
Python中的各种装饰器详解
2015/04/11 Python
python设置值及NaN值处理方法
2018/07/03 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
临床医学系毕业生推荐信
2013/11/09 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
竞聘书格式及范文
2014/03/31 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
大学开学感言
2015/08/01 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js