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 相关文章推荐
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
js实现圆形菜单选择器
Dec 03 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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python3实现Web网页图片下载
2016/01/28 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
公司借条范本
2015/05/25 职场文书
2015年科普工作总结
2015/07/23 职场文书
电工生产实习心得体会
2016/01/22 职场文书