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的10个怪癖和秘密分享
Aug 28 Javascript
jQuery构造函数init参数分析
May 13 Javascript
javascript元素动态创建实现方法
May 13 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
全面理解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 select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
php新建文件的方法实例
2019/09/26 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
写js时遇到的一些小问题
2010/12/06 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
2014年机关植树节活动方案
2014/02/27 职场文书
大班亲子运动会方案
2014/06/10 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
Java Redisson多策略注解限流
2022/09/23 Java/Android