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实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 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中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
angular分页指令操作
2017/01/09 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
Python实现单词拼写检查
2015/04/25 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
python 二维数组90度旋转的方法
2019/01/28 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
python issubclass 和 isinstance函数
2019/07/25 Python
django框架创建应用操作示例
2019/09/26 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
初三政治教学反思
2014/01/30 职场文书
元旦晚会感言
2014/03/12 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
西柏坡导游词
2015/02/05 职场文书
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android
Java 数组的使用
2022/05/11 Java/Android