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.validate的使用说明介绍
Nov 12 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
JS函数式编程实现XDM一
Jun 16 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 5.3.0 安装分析心得
2009/08/07 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
python打开网页和暂停实例
2014/09/30 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Tensorflow累加的实现案例
2020/02/05 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
python轮询机制控制led实例
2020/05/03 Python
python简单实现插入排序实例代码
2020/12/16 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
清洁工岗位职责
2014/01/29 职场文书
更夫岗位责任制
2014/02/11 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
mysql优化
2021/04/06 MySQL
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL