浅谈javascript中的作用域


Posted in Javascript onApril 07, 2012

JS中作用域的概念:

表示变量或函数起作用的区域,指代了它们在什么样的上下文中执行,亦即上下文执行环境。Javascript的作用域只有两种:全局作用域和本地作用域,本地作用域是按照函数来区分的。

首先来看几道题目:

1.

if(true){ 
var aa= "bb"; 
} 
console.log(aa); //bb for(var i = 0; i < 100; i++){ 
//do 
} 
console.log(i); //100

2.
var bb = '11111'; 
function aa() { 
alert(bb);//undefine 
var bb = 'test'; 
alert(bb);//test 
 var cc = "test1"; 
alert(age);//语法错误 
} 
aa();

3.
var test = '1111111'; 
function aa() { 
alert(test); 
} function bb() { 
var test = '22222222'; 
aa(); 
} 
bb();//alert(1111111);

4.
alert(typeof aa); //function 
alert(typeof bb); //undefined function aa() { //函数定义式 
alert('I am 111111111'); 
}; 
var bb = function() { //函数表达式 
} 
alert(typeof bb);//function

5.
function aa(){ 
var bb = "test"; 
cc = "测试"; 
alert(bb); 
} 
aa(); 
alert(cc);//测试 
alert(bb);//语法报错

上面这5道题目全部概括了js中作用域的问题

可以总结出这么几个观点

一、无块级作用域

从第一题中可以看出来,在{}中执行后,变量并没有被销毁,还是保存在内存中的,因此我们可以访问到的。

二、JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.

这里提到函数的作用域链这个概念,在ECMA262中,是这样的

任何执行上下文时刻的作用域, 都是由作用域链(scope chain)来实现.
在一个函数被定义的时候, 会将它定义时候的scope chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候,会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参,都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.
所以题目3 结果是alert(1111111);

三、JS会提前处理function定义式 和var关键字

如题目4 开始alert(bb); //undefine ,alert(age)//语法报错,这两个有什么区别呢,原因就是后面有var bb =“test”,在初始化的时候提前处理了var 这个关键字,只是这个开始未赋值

将代码修改成这样的,可以看出来

var dd = '11111'; 
function aa() { 
alert(bb);//undefine 
 var bb = 'test'; 
alert(bb);//test 

 var cc = "test1"; 
alert(age);//语法错误 
} 
aa(); 
alert(dd);//11111 
alert(cc);//语法报错

此处alert(bb)没有报语法错误,alert(age)报语法错误。

但是请注意:

<script> 
alert(typeof aa); //结果:undefined 
</script> 
<script> 
function aa() { 
alert('yupeng'); 
} 
</script>

这说明js预编译是以段为单元的。题目4同理

四、函数级作用域

函数里面的定义的变量,在函数执行完后就销毁了,不占有内存区域了。

所以题目2最后的alert(cc);语法报错,题目5最后到 alert(bb)同理

Javascript 相关文章推荐
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
jquery map方法使用示例
Apr 23 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 #Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 #Javascript
JavaScript 高级篇之函数 (四)
Apr 07 #Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 #Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 #Javascript
为原生js Array增加each方法
Apr 07 #Javascript
jquery 操作DOM案例代码分享
Apr 05 #Javascript
You might like
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
扩展String功能方法
2006/09/22 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
Python函数学习笔记
2008/10/07 Python
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Django web框架使用url path name详解
2019/04/29 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
手术室护士自我鉴定
2013/10/14 职场文书
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
工作表现评语
2014/01/19 职场文书
求职信需要的五点内容
2014/02/01 职场文书
意向协议书范本
2014/04/23 职场文书
新法人代表任命书
2014/06/06 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python