javascript权威指南 学习笔记之变量作用域分享


Posted in Javascript onSeptember 28, 2011

不知道,大家对语言中变量的“声明”与“定义”是怎么理解的,
我的理解如下:
“声明”变量,只是仅仅声明,而“定义”变量,指声明了,并且赋值了。
例如:

var name;//只是声明 
var num = 11;//声明,并且赋值,即定义了 
var password = "yangjiang";//声明,并且赋值,即定义了

下面是几点总结:
变量的作用域:全局的和局部的。(注意:如果尝试读取一个未声明的变量的值,javascript会生成一个错误)
第一点:在都使用var关键字修饰变量的情况下,如果给一个局部变量或函数的参数声明的名字与某个全局变量的名字相同,
那么就有效地隐藏了这个全局变量。
例如:
var scope1 = "global";//var修饰 
function checksScope(){ 
var scope1 = "local";//var修饰 
document.write(scope1); 
}checksScope();//local

第二点:如果尝试给一个未用 var 关键字声明的变量,那么,隐式声明的变量总是被创建为全局变量,即使
该变量只在一个函数体内使用(只有该函数运行了,才会发生作用),注意不支持函数嵌套的情形。
例如:
scope2 = "globalAAAAA";//没有使用var修饰(js会默认将其声明为全局变量) 
function checkScopeA(){ 
scope2 = "localAAAAA";//没有使用var修饰(js会默认将其声明为全局变量) 
document.write("<br/>"+scope2); 
myscope = "myLocalAAAAA";//没有使用var修饰(js会默认将其声明为全局变量) 
document.write(","+myscope); 
} 
checkScopeA();//localAAAAA,myLocalAAAAA *A 
document.write("<br/>"+scope2);//localAAAAA *B 
document.write("<br/>"+myscope);//myLocalAAAAA *C

如果将上面的例子中的 *A处的代码注释掉,
例如:
scope2 = "globalAAAAA";//没有使用var修饰(js会默认将其声明为全局变量) 
function checkScopeA(){ 
scope2 = "localAAAAA";//没有使用var修饰(js会默认将其声明为全局变量) 
document.write("<br/>"+scope2); 
myscope = "myLocalAAAAA";//没有使用var修饰(js会默认将其声明为全局变量) 
document.write(","+myscope); 
} 
//checkScopeA(); *A 
document.write("<br/>"+scope2);//globalAAAAA *B 
document.write("<br/>"+myscope);//发生错误 *C

因为函数checkScopeA没有执行,所以 *B处输出为globalAAAAA;
因为函数checkScopeA没有执行,所以变量myscope没有声明,如果尝试读取一个未声明的变量,会发生错误。
第三点:
在javascript中,函数的定义是可以嵌套的。由于 每个函数都有它自己的局部作用域,所以有可能出现几个局部作用域的嵌套层。
例如:
var scope3 = "global scope"; //定义了一个全局变量 
function checkScopeB(){ 
var scope3 = "local scope"; //定义了一个局部变量,覆盖了全局变量scope3 
function nested(){ 
var scope3 = "nested scope"; //在函数的函数的内部,定义了一个局部变量 
document.write("<br/>"+scope3); //nested scope 
} 
nested(); 
} 
checkScopeB();//nested scope

第四点:
在javascript中,没有块级作用域,函数中声明的所有变量,无论是在哪里声明的,在整个函数中它们都是有声明的。
在javascript中,没有块级作用域,函数中定义的所有变量,无论是在哪里定义的,在整个函数中它们都是有定义的。
例如:
function test(o){//根据以上的说明:此函数中的i,j,k三个变量的作用域是相同的。 
var i = 0; //变量 i 在整个函数中都有定义 
if(typeof o == "object"){ 
var j = 0 ; //变量 j 在整个函数中都有定义,而不仅仅是在 if 语句块 
for(var k=0;k<10;k++){//变量 k 在整个函数中都有定义,而不仅仅是在 if 语句块 
document.write("<br/>k的值为:"+k); 
} 
document.write("<br/>for循环外k的值:"+k);//此时的 k 仍然被定义了,k=10 
} 
document.write("<br/>j的值:"+j); //变量 j 被声明了,但可能没有被初始化 因为可能往函数中 传入的参数 不是对象 ,if语句块不会执行 
}

下面通过两种方式调用此函数:
方式一:传入对象
test({});//输出结果:上例中的注释
方式二:什么都不传
test();//输出结果:j的值:undefined
想不明白的是,在第二种方式中的输出结果,为什么会是 undefined。我当时猜的是:j的值:0
后来,这本书上面说:
由于局部变量在整个函数体内都是有声明(或定义)的,这就意味着在整个函数体中都隐藏了同名的全局
变量。虽然 局部变量在整个函数体内中都是有声明(或定义)的,但是在执行var语句之前,它是不会被初始化的。
这样的话,上面的方式二调用的输出结果,就比较好解释了,由于变量j在整个函数中都有定义,而又由于传入函数的参数为空,所以函数体中的if语句不会执行,从而使得j的值为undefined.(这是我参照上面书上说的那句话的理解)
下面的例子,更好的说明:
var sssss = "全局变量"; 
function f(){ 
document.write("<br/>"+sssss);//输出:undefined 而不是输出"全局变量" 
var sssss = "局部变量"; 
document.write("<br/>"+sssss);//输出:局部变量 
}
Javascript 相关文章推荐
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
jQuery find和children方法使用
Jan 31 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
javascript中scrollTop详解
Apr 13 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 #Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 #Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 #Javascript
一个挺有意思的Javascript小问题说明
Sep 26 #Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 #Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 #Javascript
在Windows上安装Node.js模块的方法
Sep 25 #Javascript
You might like
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php设计模式小结
2013/02/15 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
HTML的select控件美化
2017/03/27 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
详解webpack 如何集成第三方js库
2017/06/29 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python Requests 基础入门
2016/04/07 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
通过实例解析Python return运行原理
2020/03/04 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
pyspark 随机森林的实现
2020/04/24 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
科室工作的个人自我评价
2013/10/30 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
2015公司年度工作总结
2015/05/14 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers