了解 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) 什么是作用域,你可以理解为你所声明变量的可用范围,我在某个范围内申明了一个变量,且这个变量 ...
随机推荐
- 常用jquery插件资料
fullPage.js 全屏滚动https://github.com/alvarotrigo/fullPage.js Lava Lamp 导航条熔岩灯http://lavalamp.magicmedi ...
- Web app 的性能瓶颈与性能调优方法
1. web app 性能测试工具使用 2. mysql 性能分析与调优方法
- 将w3cplus网站中的文章页面提取并导出为pdf文档
最近在看一些关于CSS3方面的知识,主要是平时看到网页中有很多用CSS3实现的很炫的效果,所以就打算系统的学习一下.在网上找到很多的文章,但都没有一个好的整理性,比较凌乱.昨天看到w3cplus网站中 ...
- ch6 影响 MySQLServer 性能的相关因素
第6章影响 MySQLServer 性能的相关因素 前言: 大部分人都一致认为一个数据库应用系统(这里的数据库应用系统概指所有使用数据库的系统)的性能瓶颈最容易出现在数据的操作方面,而数据库应用系统的 ...
- c# -- 对象销毁和垃圾回收
有些对象需要显示地销毁代码来释放资源,比如打开的文件资源,锁,操作系统句柄和非托管对象.在.NET中,这就是所谓的对象销毁,它通过IDisposal接口来实现.不再使用的对象所占用的内存管理,必须在某 ...
- Intent用法简介
Intent作为联系各Activity之间的纽带,其作用并不仅仅只限于简单的数据传递.通过其自带的属性,其实可以方便的完成很多较为复杂的操作.例如直接调用拨号功能.直接自动调用合适的程序打开不同类型的 ...
- Sql中的Merge和output
先看merge, 不用merge时: --更新 update TA Value ) --插入没有的数据 insert into TA ,,Value from TB ) and TypeName=@v ...
- CentOS 7.0系统安装配置LAMP服务器(Apache+PHP+MariaDB)
CentOS 7.0接触到的用户是比较少的,今天看了站长写了一篇关于centos7中安装配置LAMP服务器的教程,下面我把文章稍加整理一下转给大家学习交流,希望例子能给各位带来帮助哦. cento ...
- 【转】mac/linux终端光标的快捷键操作
摘自网络:原标题是类似linux/unix命令行终端的光标及字符控制快捷键的东东. 常用的快捷键: Ctrl + d 删除一个字符,相当于通常的Delete键(命令行若无所有字符,则相当于exit:处 ...
- Nginx upstream 长连接
原文: http://bollaxu.iteye.com/blog/900424 Nginx upstream目前只有短连接,通过HTTP/1.0向后端发起连接,并把请求的"Connecti ...