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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
javascript常用代码段搜集
Dec 04 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
对vuex中store和$store的区别说明
Jul 24 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中与数组相关的函数
2007/03/22 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
Python中音频处理库pydub的使用教程
2017/06/07 Python
python pygame实现2048游戏
2018/11/20 Python
python多进程重复加载的解决方式
2019/12/13 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
后进生转化工作制度
2014/01/17 职场文书
文明餐桌活动方案
2014/02/11 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
2014年政工师工作总结
2014/12/18 职场文书
军训个人总结
2015/03/03 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书