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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
javascript 快速排序函数代码
May 30 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
几种tab切换详解
Feb 03 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
用PHP+MySql编写聊天室
2006/10/09 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python 列表list使用介绍
2014/11/30 Python
python学习 流程控制语句详解
2016/06/01 Python
Python随机数random模块使用指南
2016/09/09 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
python调用外部程序的实操步骤
2019/03/04 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
python基础教程之while循环
2019/08/14 Python
python处理excel绘制雷达图
2019/10/18 Python
python 实现按对象传值
2019/12/26 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
30岁生日感言
2014/01/25 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
歼十出击观后感
2015/06/11 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python