JavaScript——自由变量以及作用域链

切入正题之前，我们先看一段代码~

var x=10;
function fn(){
    console.log(x);
}
function show(f){
    var x=20;
    (function(){//内部匿名函数不属于当前对象的函数
        f();
    })();
}
show(fn)

注：(function(){})表示一个匿名函数。function(arg){...}定义了一个参数为arg的匿名函数，然后使用(function(arg){...})(param)来调用这个匿名函数。其中param是传入这个匿名函数的参数。需要注意与$(function(){})的区别：$(function(){}) 是 $(document).ready(function(){}) 的简写，用来在DOM加载完成之后执行一系列预先定义好的函数。

这里我们就可以引入另一个概念了：自由变量。

什么叫自由变量呢？在A作用域中使用的变量x，却没有在A作用域中声明（即在其他作用域中声明的），对于A作用域来说，x就是一个自由变量。

var x=10;
function fn(){
    console.log(x);
}

上文中的x就是个自由变量。

那你们猜猜，这段代码将在控制台输出的数字是多少？

答案是——20！！！

啥？你也是这样以为的？

嘿嘿，那你就错了，上面我是逗你玩儿的。

正确答案是：10。

没错，正确答案就是10。

这是为什么呢？其实，在调用一个函数时，要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”，切记切记——其实这就是所谓的“静态作用域”。

对于本文第一段代码，在fn函数中，取自由变量x的值时，要到哪个作用域中取？——要到创建fn函数的那个作用域中取——无论fn函数将在哪里调用。

上面描述的只是跨一步作用域去寻找。

如果跨了一步，还没找到呢？——接着跨！——一直跨到全局作用域为止。要是在全局作用域中都没有找到，那就是真的没有了。

这个一步一步“跨”的路线，我们称之为——作用域链。

我们拿文字总结一下取自由变量时的这个“作用域链”过程：（假设a是自由量）

第一步，现在当前作用域查找a，如果有则获取并结束。如果没有则继续；

第二步，如果当前作用域是全局作用域，则证明a未定义，结束；否则继续；

第三步，（不是全局作用域，那就是函数作用域）将创建该函数的作用域作为当前作用域；

第四步，跳转到第一步。

好了，我们就拿这个按这个步骤来看看上面的代码。

第一步，在当前作用域(即fn（）函数域)查找x，没有找到.

第二步，在fn（）作用域没有找到x，则返回到创建fn的作用域去找，找到x=10，结束。

因此，控制台将输出10。

到这里大家获取还是不够清楚，那么我们再举一个更复杂的例子。

阿福！关门！放代码~~

var a=10;
function fn(){
    var b=20;
    function B(){
        console.log(a+b);
    }
    return B;
}

var x=fn();
b=200;
x();

 这段代码，控制台会输出什么呢？

我们来分析一下：

第一步，fn()函数 return 回来的是函数B，则x=函数B。x（）=B（）。即执行B函数，B函数中有两个变量，a和b。在B()中没有a也没有b，因此返回到创建B()函数的作用域继续查找，该作用域为fn（）函数作用域。

第二步，在fn（）作用域中，查找到b=20，依旧没有找到a。则返回到创建fn()的作用域去查找。该作用域为全局作用域。

第三步，在全局作用域中，查找到a=10，因此a+b=30。控制台输出三十，结束。

好啦，以上就是自由变量和作用域链的相关知识啦~，相信上文的描述会使得这两个知识点很容易就懂。大家如果有什么疑问，或者发现文章有描述错误的地方，欢迎留言 评论，我们一起学习呀~

Biu~~~