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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
js 求时间差的实现代码
Apr 26 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
全面理解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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
php 显示指定路径下的图片
2009/10/29 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
读jQuery之二(两种扩展)
2011/06/11 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Zabbix实现微信报警功能
2016/10/09 Python
python机器学习之神经网络(三)
2017/12/20 Python
Python按钮的响应事件详解
2019/03/04 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
Python collections模块的使用方法
2020/10/09 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
shell程序中如何注释
2012/02/17 面试题
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android