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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
JavaScript实现缓动动画
Nov 25 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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python实现五子棋小游戏
2020/03/25 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
Python的几种主动结束程序方式
2019/11/22 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
某公司C#程序员面试题笔试题
2014/05/26 面试题
焊接专业毕业生求职信
2013/10/01 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
民生工程实施方案
2014/03/22 职场文书
体育之星事迹材料
2014/05/11 职场文书
保护环境建议书400字
2014/05/13 职场文书
个人作风建设自查报告
2014/10/22 职场文书
营销计划书范文
2015/01/17 职场文书
教师节大会主持词
2015/07/06 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS