javascript作用域、作用域链(菜鸟必看)


Posted in Javascript onJune 16, 2016

javascript的作用域和作用域链是我学习最痛苦的一部分,因为我花了好多时间看了好多技术文档都没有理解.大体知道什么意思了,然后还说不出之所以然来.

通过我大量的测试和看技术文档总结了以下理解,虽然不是很有技术范但是确实能理解了。

1、javascript只有全局和局部之分,那些后台语言的各种修饰符都没有。在函数中不使用var则为全局。如下:

<script type="text/javascript"> 

varname="c#";//全局

window.name="java";//全局 

varlanguage=function() 

{ 

alert(name); 

name="javascript";//全局 

var name="JS";//局部 

alert(name); 

}() 

  

alert(name); 

</script>

上面代码中表示为全局的在都指向同一个变量,下面的定义会替换上面的。关于三个alert分别是underfind,js,javascript.这就是作用域起了作用了。

2、作用域链从0级开始依次往下排,所谓的依次往下排指的是子级的排列。在寻找变量的时候先从同级找再找父级。

在上面的例子中,

首先弹出的是language方法里的第一个alert,如果window全局是0,那么在例子中var name="js"这个就是1.第一个alert就在1中找,如果找不到在去0中找。这是它发现了同级有一个var name="js"但是它目前还没有赋值,所以弹出underfind

第二个弹出是language方法里的第二个alert,同样的他会在1里找也就是方法内部。他找到了name而且赋值了js,所以弹出的是js

第三个弹出是最下面的alert,由于在方法内部已经给全局name重新赋值了,导致弹出的是javascript。

然后增加下一个链路我们在language中顶一个方法,如下:

<scripttype="text/javascript"> 

varname="javascript";//全局 

window.name="javascript";//全局 

varlanguage=function() 

{ 

alert(name); 

name="javascript";//全局 

varname="JS";//局部 

alert(name); 

  

var lovelanguage=function(){

alert(name); 

}(); 

}() 

  

alert(name);

</script>

此时lovelanguage里的alert弹出的是js因为他会找上一级也就是language里的name,所以。。。

以上就是小编为大家带来的javascript作用域、作用域链(菜鸟必看)的全部内容了,希望大家多多支持脚步之家。

Javascript 相关文章推荐
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
原生js实现轮播图特效
May 04 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 #Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 #Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 #Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 #Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 #Javascript
jQuery动态加载css文件实现方法
Jun 15 #Javascript
异步加载JS、CSS代码(推荐)
Jun 15 #Javascript
You might like
PHP insert语法详解
2008/06/07 PHP
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
JSON对象转化为字符串详解
2017/08/11 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
python列表去重的二种方法
2014/02/14 Python
Python常见数据结构详解
2014/07/24 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
python实现textrank关键词提取
2018/06/22 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python3实现微型的web服务器
2019/09/03 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
详解python tcp编程
2020/08/24 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
学习党课思想汇报
2013/12/29 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
毕业生个人总结
2015/02/28 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android