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 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
vue 插件的方法代码详解
Jun 06 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 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
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
php中autoload的用法总结
2013/11/08 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
js类 from qq
2006/11/13 Javascript
js滚动条多种样式,推荐
2007/02/05 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
家居装修公司创业计划书范文
2014/03/20 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书