JS作用域&JS作用域链

一、作用域

一个变量的作用域（scope）是程序源代码中定义的这个变量的区域。

在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里边还使用到了高阶函数，其实可以理解成嵌套函数

functiontest1(){
var name ="one";
return function(){
console.log(name);
}
}
test1()();

test1()之后将调用外层函数，返回了一个内层函数，再继续()，就相应调用执行了内层函数，所以就输出 ”one"

嵌套函数涉及到了闭包，后面再谈..这里内层函数可以访问到外层函数中声明的变量name，这就涉及到了作用域链机制

1. JS中的声明提前

js中的函数作用域是指在函数内声明的所有变量在函数体内始终是可见的。并且，变量在声明之前就可以使用了，这种情况就叫做声明提前（hoisting)

提示:声明提前是在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();

2. 值得注意的是，上面提到的都没有传参数，如果test有参数，又如何呢？

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.

二、作用域链

上面提到的高级函数就涉及到了作用域链
例子：

function test1(){
var name ="one";
return function(){
console.log(name);
}
}
test1()();

1.作用域链的概念：

每一段js代码（全局代码或函数）都有一个与之关联的作用域链（scope chain）。这个作用域链是一个对象列表或者链表，这组对象定义了这段代码中“作用域中”的变量。
当js需要查找变量x的值的时候（这个过程称为变量解析（variableresolution）），它会从链的第一个对象开始查找，如果这个对象有一个名为x的属性，则会直接使用这个属性的值，如果第一个对象中没有名为x的属性，js会继续查找链上的下一个对象。
如果第二个对象依然没有名为x的属性，则会继续查找下一个，以此类推。如果作用域链上没有任何一个对象含有属性x，那么就认为这段代码的作用域链上不存在x，并最终抛出一个引用错误（ReferenceError）异常。

2. 作用域链举例：

在js最顶层代码中（也就是不包括任何函数定义内的代码），作用域链由一个全局对象组成。
在不包含嵌套的函数体内，作用域链上有两个对象，第一个是定义函数参数和局部变量的对象，第二个是全局对象。
在一个嵌套的函数体内，作用域上至少有三个对象。

3. 作用域链创建规则：

当定义一个函数时（注意，是定义的时候就开始了），它实际上保存一个作用域链。
当调用这个函数时，它创建一个新的对象来储存它的参数或局部变量，并将这个对象添加保存至那个作用域链上，同时创建一个新的更长的表示函数调用作用域的“链”。
对于嵌套函数来说，情况又有所变化：每次调用外部函数的时候，内部函数又会重新定义一遍。因为每次调用外部函数的时候，作用域链都是不同的。内部函数在每次定义的时候都要微妙的差别---在每次调用外部函数时，内部函数的代码都是相同的，而且关联这段代码的作用域链也不相同。

举个作用域链的实用例子：

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,就完成搜索返回；
还有一个例子有时候我们也会犯错。

<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);
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>

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;
那么使用

ith(o){
x = 2;
}

就可以转换成 o.x = 2;
假如o没有定义属性x，它的功能就只是相当于 x = 2; 一个全局变量罢了。
因为with提供了一种读取o的属性的快捷方式，但他并不能创建o本身没有的属性。
要理解变量的作用域范围就得先理解作用域链
用var关键字声明一个变量时，就是为该变量所在的对象添加了一个属性。
作用域链：由于js的变量都是对象的属性，而该对象可能又是其它对象的属性，而所有的对象都是window对象的属性，所以这些对象的关系可以看作是一条链
链头就是变量所处的对象，链尾就是window对象
看下面的代码：

function t() {
var a;
function t2() {
var b;
}
}

js中函数也是对象，所以变量a所在的对象是t，t又在window对象中
所以a的作用域链如下:
t--window
那么b所以在的对象即t2，t2又包含在t中，t又在window对象，所以b的作用域链如下
t2--t--window
在明白了作用域链之后，我们下面就可以开始变量的作用域分析。

**1 javascript 没有var的变量都为全局变量，且为window对象的属性**
function test1() {
//执行这个句的时候它会找作用域对象，这个函数就是作用域链中的第一个对象，但这个对象中没有相关的var语句
//于里就找作用域链的第二个对象，即全局对象，而全局对象中也没有相关的var语句
//由于没有相关的var语句，js隐式在函数地声明了变量即var all;
all = 30;
alert(all);
}
test1();
alert(all);
alert(window.all);

2 函数内(函数内的函数除外)定义的变量在整个函数内部都有效

function test2() {
var t = 0;
//在for的条件里定义变量，这个变更的作用域链对象是这个函数
//因此在整个的函数里它是有效的
for (var i = 0; i < 5; i++) {
t += i;
}
alert(i);
}
test2();

3 函数内部的变量取代全局同名变量

var t = "bb";
function test() {
//执行t的时候，它会先找作用域链对象，由于它定义在函数内部，所以这个函数就是它的作用域链的第一个对象
//而在这个对象里又有t的定义，所以t就是局部变量了，它替换了全局变量t
//t只是此时有定义，但并没有赋值，赋值在下一行，所以这里输出了undefined
alert(t);
var t = "aa";
alert(t);
}
test();

4.没块的作用域

if (true) {
//在块中定义了一个变量，它的作用域链的第一个对象就是全局对象window
var tmp = 0;
}
//tmp的作用域链的第一个对象就是全局对象window，而上面又有全局对象中相关的var语句，因此输出0
alert(tmp);

var temp = (function(){
var name ="test";
return function(){
alert(name);
}
})();

以上代码片断是我们jser经常见到的写法，是传说中的闭包。众所周知：调用 temp();会弹出 “ test”;该过程可以有以下三条理论作为依据来解释：
1）js 作用域只和函数的界定符相关，函数与函数的嵌套形成了作用域链；
2）作用域链的创建规则是复制上一层环境的作用域链，并将指向本环境变量对象的指针放到链首；
3）在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。

最后编辑于：2020.01.09 17:14:40

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,189评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,577评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,857评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,703评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,705评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,620评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,995评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,656评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,898评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,639评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,720评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,395评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,982评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,953评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,195评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,907评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,472评论 2赞 342