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 相关文章推荐
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
通过url查找a元素并点击
Apr 09 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 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函数
2006/10/09 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
PHP7内核之Reference详解
2019/03/14 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
django框架创建应用操作示例
2019/09/26 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
机械制造专业个人的自我评价
2013/12/28 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
七个非常实用的Python工具包总结
2021/06/15 Python