JavaScript 变量作用域分析


Posted in Javascript onJuly 04, 2011
/* 代码1 */ 
var scope = "global "; 
function checkScope() { 
var scope = "local "; 
function childCheck() { 
var scope = "childLocal "; 
document.write(scope); 
} 
function childUndefined() { 
document.write(scope); 
var scope; 
} 
function childOverride() { 
scope = "childOverride "; 
document.write(scope); 
} 
document.write(scope); //输出"local" 
childCheck(); //输出"childLocal" 
childUndefined(); //输出"undefined" 
childOverride(); //输出"childOverride" 
document.write(scope); //输出"childOverride" 
} 
checkScope(); //输出"local childLocal undefinedchildOverride childOverride" 
document.write(scope); //输出"global "

全局作用域与局部作用域
全局(global)变量的作用域是全局的,在Javascript中处处有定义;而函数内部声明的变量是局部(local)变量,其作用域是局部性的,只在函数体内部有定义。对于下面的输出读者应不会感到意外。
/* 代码2 */ 
var scope = "global"; 
function checkScope() { 
var scope = "local"; 
document.write(scope); 
} 
checkScope(); //输出"local" 
document.write(scope); //输出"global"

全局变量作用域中使用变量可以不用var语句,但在声明局部变量是一定要使用var语句,否则会视为对全局变量的引用。看下面代码:
/* 代码3 */ 
var scope = "global"; 
function checkScope() { 
scope = "local"; 
document.write(scope); 
} 
checkScope(); //输出"local" 
document.write(scope); //输出"local"

没有块作用域
Javascript没有块级作用域,函数中声明的变量在整个函数中都是有定义的。对于下面的代码对于生疏的读者可能颇感意外:
/* 代码4 */ 
var scope = "global"; 
function checkScope() { 
document.write(scope); //语句4.1 
var scope = "local"; //语句4.2 
document.write(scope); 
} 
checkScope(); //输出"undefinedlocal"

由于语句4.1(var scope = "local";)声明的变量在整个checkScope函数作用域内都有效,因此在语句4.2(document.write(scope); )执行的时scope引用的是局部变量,而此时局部变量scope尚未定义,所以输出”undefined”。因此一个好的编程习惯是将所有的变量声明集中起来放在函数的开头。

在了解了上述内容之后,读者再看看代码1应该不会感到困惑了。

对象的属性变量
对象的属性变量比较容易理解,看一下下面的代码读者应该不会感到疑惑。

/* 代码5 */ 
var scope = "global "; 
var obj = new Object(); 
obj.scope = "object "; 
obj.checkScope = function () { 
var scope = "loacl "; 
document.write(scope); //输出"loacl" 
document.write(this.scope); //输出"object" 
document.write(window.scope); //输出"global" 
} 
obj.checkScope(); //输出"loacl object global"
Javascript 相关文章推荐
javascript Event对象详解及使用示例
Nov 22 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
Vue组件之极简的地址选择器的实现
May 31 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 #Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 #Javascript
jQuery 对Select的操作备忘记录
Jul 04 #Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 #Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 #Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 #Javascript
js 字符串转化成数字的代码
Jun 29 #Javascript
You might like
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
使用Python进行目录的对比方法
2018/11/01 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
Python变量类型知识点总结
2019/02/18 Python
简单了解python的一些位运算技巧
2019/07/13 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
企业精神口号
2014/06/11 职场文书
机关作风建设心得体会
2014/10/22 职场文书
八年级物理教学反思
2016/02/19 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
MySQL 全文检索的使用示例
2021/06/07 MySQL
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
进行数据处理的6个 Python 代码块分享
2022/04/06 Python