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知识点收藏
Feb 22 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
javascript实现倒计时提示框
Mar 02 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
短波收音机简介
2021/03/01 无线电
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
PDO::query讲解
2019/01/29 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
几个人围成一圈的问题
2013/09/26 面试题
毕业生求职简历的自我评价
2013/10/23 职场文书
大学军训自我鉴定
2013/12/15 职场文书
工商管理实习生自我鉴定范文
2013/12/18 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
大学生党课感想
2015/08/11 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS