了解 JS 作用域与作用域链
（1）作用域
一个变量的作用域（scope）是程序源代码中定义的这个变量的区域。
1. 在JS中使用的是词法作用域（lexical scope)
不在任何函数内声明的变量（函数内省略var的也算全局）称作全局变量（global scope）
在函数内声明的变量具有函数作用域（function scope），属于局部变量
局部变量优先级高于全局变量
var name="one";
function test(){
var name="two";
console.log(name); //two
}
test();
函数内省略var的，会影响全局变量，因为它实际上已经被重写成了全局变量
var name="one";
function test(){
name="two"; }
test();
console.log(name); //two
函数作用域，就是说函数是一个作用域的基本单位，js不像c/c++那样具有块级作用域 比如 if for 等
function test(){
for(var i=0;i<10;i++){
if(i==5){
var name = "one";
}
}
console.log(name); //one
}
test(); //因为是函数级作用域，所以可以访问到name="one"
当然了，js里边还使用到了高阶函数，其实可以理解成嵌套函数
function test1(){
var name = "one";
return function (){
console.log(name);
}
}
test1()();
test1()之后将调用外层函数，返回了一个内层函数，再继续()，就相应调用执行了内层函数，所以就输出 ”one"
嵌套函数涉及到了闭包，后面再谈..这里内层函数可以访问到外层函数中声明的变量name，这就涉及到了作用域链机制
2. JS中的声明提前
js中的函数作用域是指在函数内声明的所有变量在函数体内始终是可见的。并且，变量在声明之前就可以使用了，这种情况就叫做声明提前（hoisting)
tip:声明提前是在js引擎预编译时就进行了，在代码被执行之前已经有声明提前的现象产生了
比如
var name="one";
function test(){
console.log(name); //undefined
var name="two";
console.log(name); //two
} test();
上边就达到了下面的效果
var name="one";
function test(){
var name;
console.log(name); //undefined
name="two";
console.log(name); //two
} test();
再试试把var去掉？这是函数内的name已经变成了全局变量，所以不再是undefined
var name="one";
function test(){
console.log(name); //one
name="two";
console.log(name); //two
} test();
3. 值得注意的是，上面提到的都没有传参数，如果test有参数，又如何呢？
function test(name){
console.log(name); //one
name="two";
console.log(name); //two
}
var name = "one";
test(name);
console.log(name); // one
之前说过，基本类型是按值传递的，所以传进test里面的name实际上只是一个副本，函数返回之后这个副本就被清除了。
千万不要以为函数里边的name="two"把全局name修改了，因为它们是两个独立的name
（2）作用域链
上面提到的高级函数就涉及到了作用域链
function test1(){
var name = "one";
return function (){
console.log(name);
}
}
test1()();
1. 引入一大段话来解释：
每一段js代码（全局代码或函数）都有一个与之关联的作用域链（scope chain）。
这个作用域链是一个对象列表或者链表，这组对象定义了这段代码中“作用域中”的变量。
当js需要查找变量x的值的时候（这个过程称为变量解析（variable resolution）），它会从链的第一个对象开始查找，如果这个对象有一个名为x的属性，则会直接使用这个属性的值，如果第一个对象中没有名为x的属性，js会继续查找链上的下一个对象。如果第二个对象依然没有名为x的属性，则会继续查找下一个，以此类推。如果作用域链上没有任何一个对象含有属性x，那么就认为这段代码的作用域链上不存在x，并最终抛出一个引用错误（ReferenceError）异常。
2. 作用域链举例：
在js最顶层代码中（也就是不包括任何函数定义内的代码），作用域链由一个全局对象组成。
在不包含嵌套的函数体内，作用域链上有两个对象，第一个是定义函数参数和局部变量的对象，第二个是全局对象。
在一个嵌套的函数体内，作用域上至少有三个对象。
3. 作用域链创建规则：
当定义一个函数时（注意，是定义的时候就开始了），它实际上保存一个作用域链。
当调用这个函数时，它创建一个新的对象来储存它的参数或局部变量，并将这个对象添加保存至那个作用域链上，同时创建一个新的更长的表示函数调用作用域的“链”。
对于嵌套函数来说，情况又有所变化：每次调用外部函数的时候，内部函数又会重新定义一遍。因为每次调用外部函数的时候，作用域链都是不同的。内部函数在每次定义的时候都要微妙的差别---在每次调用外部函数时，内部函数的代码都是相同的，而且关联这段代码的作用域链也不相同。
（tip: 把上面三点理解好，记住了，最好还要能用自己的话说出来，不然就背下来，因为面试官就直接问你：请描述一下作用域链...)
举个作用域链的实用例子：
var name="one";
function test(){
var name="two";
function test1(){
var name="three";
console.log(name); //three
}
function test2(){
console.log(name); // two
} test1();
test2();
} test();
上边是个嵌套函数，相应的应该是作用域链上有三个对象
那么在调用的时候，需要查找name的值，就在作用域链上查找
当成功调用test1()的时候，顺序为 test1()->test()->全局对象window 因为在test1()上就找到了name的值three，所以完成搜索返回
当成功调用test1()的时候，顺序为 test2()->test()->全局对象window 因为在test2()上没找到name的值，所以找test()中的，找到了name的值two,就完成搜索返回
还有一个例子有时候我们会犯错的，面试的时候也经常被骗到。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function buttonInit(){
for(var i=1;i<4;i++){
var b=document.getElementById("button"+i);
b.addEventListener("click",function(){
alert("Button"+i); //都是 Button4
},false);
}
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>
为什么？
根据作用域链中变量的寻找规则：
b.addEventListener("click",function(){
alert("Button"+i);
},false);
这里有一个函数，它是匿名函数，既然是函数，那就在作用域链上具有一个对象，这个函数里边使用到了变量i，它自然会在作用域上寻找它。
查找顺序是 这个匿名函数 -->外部的函数buttonInit() -->全局对象window
匿名函数中找不到i,自然跑到了buttonInit(), ok,在for中找到了，
这时注册事件已经结束了，不要以为它会一个一个把i放下来，因为函数作用域之内的变量对作用域内是一直可见的，就是说会保持到最后的状态
当匿名函数要使用i的时候，注册事件完了，i已经变成了4，所以都是Button4
那怎么解决呢？
给它传值进去吧，每次循环时，再使用一个匿名函数，把for里边的i传进去，匿名函数的规则如代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function buttonInit(){
for(var i=1;i<4;i++){
(function(data_i){
var b=document.getElementById("button"+data_i);
b.addEventListener("click",function(){
alert("Button"+data_i);
},false);
})(i);
}
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>
这样就可以 Button1..2..3了
4.上述就是作用域链的基本描述，另外，with语句可用于临时拓展作用域链（不推荐使用with）
语法形如：
with(object)
statement
这个with语句，将object添加到作用域链的头部，然后执行statement,最后把作用域链恢复到原始状态
简单用法：
比如给表单中各个项的值value赋值
一般可以我们直接这样
var f = document.forms[0];
f.name.value = "";
f.age.value = "";
f.email.value = "";
引入with后(因为使用with会产生一系列问题，所以还是使用上面那张形式吧）
with(document.forms[0]){
f.name.value = "";
f.age.value = "";
f.email.value = "";
}
另外，假如 一个对象o具有x属性，o.x = 1;
那么使用
with(o){
x = 2;
}
就可以转换成 o.x = 2;
假如o没有定义属性x，它的功能就只是相当于 x = 2; 一个全局变量罢了。
因为with提供了一种读取o的属性的快捷方式，但他并不能创建o本身没有的属性。
了解 JS 作用域与作用域链的更多相关文章
- JS的作用域和作用域链
每个函数都有自己的作用域,当执行流进入一个函数时,函数就会被推入栈中,而在函数执行之后,栈将其执行环境弹出,把控制权放回给之前的作用域,全局作用域是最外围的一个作用域,因此,所有全局变量和函数都是作为 ...
- 第十八篇 js高级知识---作用域链
一直有想法去写写js方面的东西,我个人是最喜欢js这门语言,喜欢的他的自由和强大,虽然作为脚本语言有很多限制的地方,但也不失为一个好的语言,尤其是在H5出现之后.下面开始说说js的方面的东西,由于自己 ...
- js学习--变量作用域和作用域链
作为一名菜鸟的我,每天学点的感觉还是不错的.今天学习闭包的过程中看到作用域与作用域链这两个概念,我觉得作为一名有追求的小白,有必要详细了解下. 变量的作用域 就js变量而言,有全局变量和局部变量.这里 ...
- js 作用域，作用域链，闭包
什么是作用域? 作用域是一种规则,在代码编译阶段就确定了,规定了变量与函数的可被访问的范围.全局变量拥有全局作用域,局部变量则拥有局部作用域. js是一种没有块级作用域的语言(包括if.for等语句的 ...
- Js 作用域与作用域链与执行上下文不得不说的故事 ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
最近在研究Js,发现自己对作用域,作用域链,活动对象这几个概念,理解得不是很清楚,所以拜读了@田小计划大神的博客与其他文章,受益匪浅,写这篇随笔算是自己的读书笔记吧~. 作用域 首先明确一个概念,js ...
- 理解js中的作用域，作用域链以及闭包
作用域变量作用域的类型:全局变量和局部变量全局作用域对于最外层函数定义的变量拥有全局作用域,即对任何内部函数来说,都是可以访问的 <script> var outerVar = " ...
- js对象系列【二】深入理解js函数，详解作用域与作用域链。
这次说一下对象具体的一个实例:函数,以及其对应的作用域与作用域链.简单的东西大家查下API就行了,这里我更多的是分享自己的理解与技巧.对于作用域和作用域链,相信绝大多数朋友看了我的分享都能基本理解,少 ...
- js基础梳理-如何理解作用域和作用域链？
本文重点是要梳理执行上下文的生命周期中的建立作用域链,在此之前,先回顾下关于作用域的一些知识. 1.什么是作用域(scope)? 在<JavaScritp高级程序设计>中并没有找到确切的关 ...
- JS作用域，作用域，作用链详解
前言 通过本文,你大概明白作用域,作用域链是什么,毕竟这也算JS中的基本概念. 一.作用域(scope) 什么是作用域,你可以理解为你所声明变量的可用范围,我在某个范围内申明了一个变量,且这个变量 ...
随机推荐
- 前端测试回顾及我们为什么选择Karma
前端测试,或者UI测试一直是业界一大难题.最近Q.js使用Karma作为测试任务管理工具,本文在回顾前端测试方案的同时,也分析下为什么Q.js选用Karma而不是其他测试框架. 像素级全站对比 曾今有 ...
- CoreImage 处理图片
1.CoreImage 滤镜的使用(马赛克模糊) CoreImage是苹果公司为了简化图片处理的难度而开发出来的类库. 随着iOS版本号升级以及硬件性能的不断提升,CoreImage将支持越来越多的滤 ...
- Nginx 301重定向的配置
301重定向是很常见的需求,比如访问 fz1688.com,自动跳到 www.fz1688.com.或者倒过来,访问 www.fz1688.com 跳到 fz1688.com.Nginx 中配置 30 ...
- Asp.net Core WebApi 支持json/xml格式的数据返回
Asp.net core 在做webapi项目的时候,默认是只返回json格式的数据的,如果想要开启xml数据返回,需要在startup里配置如下: public void ConfigureServ ...
- 使用Eclipse进行远程调试【转】
今天决定做件有意义的事,写篇图文并茂的blog,为什么要图文并茂?因为很多事可能用语言也说不明白,从以前我发表的一篇文章可以看得出来,http://blog.csdn.net/sunyujia/arc ...
- iOS开发——项目实战总结&经典错误一
经典错误一 No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=armv7, VA 运行报错 出现的原因:armv7s ...
- mac下python实现vmstat
mac下没有linux/unix 的vmstat,只有vm_stat; sh-3.2# vm_statMach Virtual Memory Statistics: (page size of 409 ...
- jdbc无法连接数据解析
1.网络原因 2.账户权限问题 账户是否赋予以下的权限: grant connect, resource to ADM_BI; grant read, write on directory BACKU ...
- volley中图片加载
volley图片加载有三种方式: 记得:Volley中已经实现了磁盘缓存了,查看源码得知通过 context.getCacheDir()获取到了 /data/data/<application ...
- jQuery超炫酷按钮插件及源码
现在大部分网页的按钮都是经过美化的,那些原始的浏览器按钮太过于枯燥乏味,让用户失去和网站交互的兴趣.早期我们都是通过背景图片来美化网页按钮,而现在我们可以利用扩展性更好的CSS3来制作漂亮的网页按钮, ...