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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
深入理解javascript中的this
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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
javascript 一些用法小结
2009/09/11 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
Vue组件通信的四种方式汇总
2018/02/08 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
python实现UDP协议下的文件传输
2020/03/20 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
护士2014年终工作总结
2014/11/11 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS