0

0

解析关于JavaScript作用域的问题

怪我咯

怪我咯

发布时间:2017-05-07 11:46:39

|

1038人浏览过

|

来源于php中文网

原创

每个写过程序的人都不会对作用域这个概念陌生,那在这篇文章中就来谈下javascript的作用域。

 在javascript,全局环境本身就一个对象。在浏览器宿主中这个对象是window,而当javascript用于其它非浏览器的宿主,如嵌入式的环境中,可能会是其它的对象。

 在这里也纠正一个观念,有很多人都认为javascript只在浏览器中使用,其实javascript也能在很多非web情况下使用,据介绍javascript在一些基于嵌入式的应用领域表现得也很出色,当然这些我也只是听过传说而已。

 言归正传,当我们写下:var i=1时,其实就是声明了一个window作用域的一个变量。

 而当我们写下i=1时,是声明了一个window的属性。

 看这样一段代码:
  [code=javascript">
  
function runCode(id) {
obj = document.getElementById(id); 
var TestWin=open(''); //打开一个窗口并赋给变量TestWin。 
TestWin.opener = null // 防止代码对论谈页面修改 
TestWin.document.write(obj.value); //向这个打开的窗口中写入代码code,这样就实现了运行代码功能。 
TestWin.document.close(); 
} 
var a = "hello";
b = "world";
Test();
function Test() 
{
alert(a + " " + b);
var a = "welcome";
b = "china";
alert(a + " " + b);
}
alert(a + " " + b);

 这段代码分别输出的结果是:undefined world,welcome china, hello china.

 我们来分别解释:

 在上文中,我们说过,在Javascript预编译时,会把所有var变量创建,默认值为undefined,我们在这里可以举一个例子:

 我们可以写这样一段代码:

  [/code]
    alert(a);  
    alert(b);  
    var a = "111";  
        b = "111";

 当我们执行运行这段脚本时,可以发现,首先弹出undefined,然后回提示脚本错误,提示b不存在。由此就可以表明,a在预编译的过程中就已经被创建并且初始化为undefined,而b却只能在实际运行时按顺序去解释。其实在预编译后的Javascript代码可以近乎理解如下:

 接下来我们可以谈一下函数的作用域问题,每当代码运行进入一个函数时,Javascript引擎就会自动创建一个新的作用域,然后把这个新作用域作为当前作用域的子作用域,然后把当前的代码作用域切换到这个新作用域。当代码退出函数时,这个作用域销毁,把代码作用域交还给他的父作用域。

 好,准备工作差不多了,接下来我们就来解释第一个问题:问什么会输出undefined world。

 首先代码进行在预编译,当进入 Test方法时,开启一个新作用域,然后把全局作用域作为他的父作用域。然后对Test内的方法进行预编译,和上面的代码一样,Test方法被预编译后方法体大致如下:

function Test() {
    var a = undefined;
    alert(a + " " + b);
    var a = "welcome";
    b = "china";
    alert(a + " " + b);
}


 当然,在当前作用域下无法找到b,于是他就会到他的父作用域下,也就是全局作用域找到了b=“world”。于是也就产生了这样的结果。

 第二次弹出welcome china,没什么好说的。

 第三次,弹出hello china。我们可以这样理解,var a 只是 方法Test的一个局部变量,而b由于事先未声明,因此他会去父作用域中去找到对应的定义。

 好,接下来,我们再看一下这个方法的若干个变体。

立即学习Java免费学习笔记(深入)”;

仿M18紫色版整站 For SHOPEX
仿M18紫色版整站 For SHOPEX

SHOPEX仿M18紫色版 ,适合综合商城,服饰商城.化妆品商城等使用.程序基于SHOPEX4.8.5 最新版制作. 安装方法:1.解压上传程序至网站根目录.. 访问:域名/bak.(用户名:admin 密码:123456)2.进入帝国备份王后,配置数据库信息.选择-www.taomoban.net目录.还原数据库.3.修改FTP目录下的config/config.php 数据库连接信息.4.登陆

下载

 首先,我们将方法体内的var a改成a,我们先不看答案,直接来分析,首先,在预编译阶段,方法体内几乎没有任何改变,因此此时a和b一样,都要去他们的父作用域中去寻找,因此第一次出的结果应该是hello world,第二次没什么说的:welcome china,第三次由于a和b在本作用域内都没有事先定义,因此都是再改变父作用域内的值,因此应该输出welcome china.

 我们继续:

 和上面的分析一样,应该输出undefined undefined,welcome china,hello world.

 应该是undefined china,welcome china,hello china.

 经试验,都没问题。

 因此我们可以得出,每个变量在找不到自己的定义时,都会沿着作用链向上寻找,这样就很可能会出现未预知的错误,给排错添加了很多困难。更麻烦的是,还可能会对父作用域上的变量值进行修改,因此我们在声明变量时应该尽量加上var,尽管Javascript并不强迫我们这样做。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

14

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

8

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

7

2026.01.22

PHP特殊符号教程合集
PHP特殊符号教程合集

本专题整合了PHP特殊符号相关处理方法,阅读专题下面的文章了解更多详细内容。

6

2026.01.22

PHP探针相关教程合集
PHP探针相关教程合集

本专题整合了PHP探针相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.22

菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

20

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

html编辑相关教程合集
html编辑相关教程合集

本专题整合了html编辑相关教程合集,阅读专题下面的文章了解更多详细内容。

106

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号