关于前端:深入理解JavaScript作用域

本文介绍 JavaScript 中的作用域。从作用域是什么聊起，介绍 JavaScript 的词法作用域，再从词法作用域聊到动静作用域，将二者进行比照。讲完了作用域的分类，咱们用一个例子解释作用域的作用。而后讲作用域的分类以及如何因为个性写函数

作用域是什么？

编译原理

程序中的一段源代码在执行之前会经验三个步骤，统称“编译”

• 分词 / 词法剖析（Tokenizing/Lexing）

  • 例如将 var a = 2; 拆解成最根本的词法单元 var、a、=、2
• 解析 / 语法分析（Parsing）
• 将词法单元流（数组）转换成一个由原生逐级嵌套所组成的代表了程序语法结构的数。这个树称为“形象语法树”（AST，这个也是古代前端框架的关键所在）

• 代码生成

  • 将 AST 转换为可执行代码的过程被称为代码生成

——《你不晓得的 JavaScript 上卷》

简略来说：任何 JavaScript 代码片段在执行前都要进行编译

了解作用域

变量的赋值操作会执行两个动作，首先编译器会在以后作用域中申明一个变量（如果之前没有申明过），而后在运行时引擎会在作用域中查找该变量，如果可能找到就对它赋值

作用域嵌套

作用域是依据名称查找变量的一套规定

当一个块或函数嵌套在另一个块或函数中时，就产生了作用域的嵌套。因而，在以后作用域中无奈找到某个变量时，引擎就会在外层嵌套的作用域中持续查找，直到找到该变量，或到达最外层的作用域（也就是全局作用域）为止

咱们通过一个例子来了解作用域

var a = 1;
function foo() {
    var a = 2;
    console.log(a);
    var myFunction = (function () {
        var a = 3;
        console.log(a);
    })();}
function bar() {
    var a = 4;
    foo();}
bar(); // 2 3

将函数翻译成图像如下：

每一个作用域就是一个域，在这个域中你的变量能够自定义，能够和外边的一样，也能够轻易起，但代码执行时，先在执行域中找变量，找不到再往外层找，一层一层直到全局作用域

留神哦，你代码写在哪里，你的作用域就定位在哪里，在例子中，foo 函数和 bar 函数是同级（同一层面），它们外部的变量互不影响，这就是 JavaScript 的作用域

词法作用域和动静作用域

作用域共有两种次要的工作模式。第一种是最为广泛的，被大多数编程语言所采纳的词法作用域，另一种叫做动静作用域，如 Bash 脚本

词法作用域是一套引擎如何寻找变量以及会在何处找到变量的规定。词法作用域最重要的特色是它的 定义过程产生在代码的书写阶段（假如你没有应用 eval 或 with），即你写好后你的作用域就定了

JavaScript 并不具备动静作用域。它只有词法作用域，简单明了，然而 this 机制某种程度上很像动静作用域

次要区别：词法作用域是在写代码或者说定义时确定的，而动静作用域是在运行时确定的（this 也是！）

词法作用域关注函数在何处申明，而动静作用域关注函数从何处调用

词法作用域

function foo() {console.log(a);
}

function bar() {
    var a = 3;
    foo();}

var a = 2;

bar(); // a = 2

动静作用域

PS：假如 JavaScript 中有动静作用域，实际上是没有的

function foo() {console.log(a);
}

function bar() {
    var a = 3;
    foo();}

var a = 2;

bar(); // a = 3

你能够形象的了解成，动静作用域是动的，我的 bar 在全局调用，bar 中又调用了 foo，调用 foo 打印 console.log(a)，既然这样，就能够了解成这种思考模式：

- function foo() {-    console.log(a)
- }

function bar() {
    var a = 3;
    + function foo() {+    console.log(a)
    + }
}

var a = 2;

bar()

将 foo 函数搬到 bar 函数中，那么我调用 bar 的时候，在 bar 函数中，a 天然就是 3。这是一种区别于 词法作用域的一种思维模式，和 this 的状况是一样的（谁调用我，我就指向谁。很动静吧）

这也是 JavaScript 中让人焦急的中央，一个语言中两种模式的存在，当你学会作用域后，以作用域的思考模式去了解 this 时，你常感到困惑，为什么 this 要指来指去，明明能够在子函数中写 this.name = name，为什么还要先赋值给 that。当初看到动静作用域是不是解惑了一些，原来，作用域是作用域，this 则以动静的模式存在于对象中的

作用域的作用

笔者这里有个回调函数，当你明确这个例子，你对作用域的了解就已 登堂入室 入门：

var a = 1;
console.log(a);
var myFunction = (function () {
    var a = 2;
    console.log(a);
    var myNextFuntion = (function () {
        var a = 3;
        console.log(a);
        var myNextNextFunction = (function () {
            var a = 4;
            console.log(a);
        })();})();})();

每一个函数中，必然有作用域，作用域就是畛域，在咱们畛域中，打印出的 a 就是我作用域中的 a。作用域链就是如果我的作用域里没有，往我的下级找，晓得找到这个变量（找不到就是 undefined）

另外一种角度：函数中的变量为公有变量，只有本函数能力拜访。下级作用域不能拜访上级作用域中的变量

作用域中的分类

在 JavaScript 中，作用域是执行代码的上下文。作用域有四种类型：全局作用域、函数作用域（也称“部分作用域”）、块作用域（block）和 eval 作用域

在函数外部应用 var 定义的代码，其作用域是部分的，且只对该函数的其余表达式是“可见的”，包含嵌套 / 子函数中的代码。在全局作用域内定义的变量从任何中央都能够拜访，因为它是作用域链中的最高层 / 最初一个。

如下代码，因为作用域的影响，foo 的每个申明都是举世无双的

var foo = 0; // 全局作用域
console.log(foo); // 0
var myFunction = (function () {
    var foo = 1; // 函数作用域
    console.log(foo); // 1
    var myNestFunction = (function () {
        var foo = 2; // 函数作用域
        console.log(foo); // 2
    })();})();
eval('var foo = 3; console.log(foo);'); // eval() 作用域
// let/const 块作用域，变量无奈晋升
for (let i = 0; i < 5; i++) {setTimeout(function() {console.log(i)
    });
}

因为全局作用域和函数作用域曾经是介绍作用域是什么时讲过，而且概念绝对简略，这里不再赘述。eval() 函数会将传入的字符串当做 JavaScript 代码执行，也就是一句话一个作用域，很好了解，笔者也不再讲。让咱们看看块级作用域

块级作用域

在 ES6 之前咱们是没有块级作用域的，ES6 中的 let 关键字 , const 关键字 能造成块作用域

咱们先想一想没有块级作用域时会产生什么问题：

for (var i = 0; i < 5; i++) {setTimeout(function () {console.log(i); // 55555
    });
}

咱们心愿它是怎么样的呢？在 for 循环中，每一个 i 都是独立的，即便是 setTimeout 有提早作用下，每个 i 都是进入事件循环队列中，而后一个一个打印进去

然而理论状况是，var i = 0 裸露在全局作用域中，因为 setTimeout 有滞后性（只有是 setTimeout 就把其中的函数塞入宏工作中），所以先执行完 for 循环，for 循环的后果是 1,2,3,4,5。但因为 i 是全局变量，所以 setTimeout 中的 i 对立为 5

怎么破？在 ES6 之前，将 for 循环中的函数改成立刻执行函数（造成作用域），每次循环，IIFE 就会生成一个新的作用域，使得提早函数的调回能够将新的作用域关闭在每个循环外部，每个迭代中都会含有一个具备正确值的变量供咱们拜访

for (var i = 0; i < 5; i++) {(function (j) {setTimeout(function () {console.log(j);
        });
    })(i);
}
// 1 2 3 4 5

每传入一个 i 就执行函数，每一个 i 所处的作用域都是独立的

起初有了 ES6 后，只需讲 var 改成 let 即可

for (let i = 0; i < 5; i++) {setTimeout(function () {console.log(i);
    });
}

起因很简略，因为 let 自带块级作用域，详细情况笔者在 Promise 面试题思考延长 做过解释，这里不做过多介绍。只须要晓得有 let 和 const 的中央，它定义的变量 i 就被包裹在块级作用域中（域有相对畛域，变量自成一体）

这样咱们就又有种办法解决 for 循环中 setTimeout 自变量扭转的问题了。这里心愿你能明确一个知识点。ES6 之前 JavaScript 是没有块级作用域概念的，只能通过立刻执行函数来做出块级作用域的成果，或者说因为函数作用域的变量外界不能拜访，相当于确保函数中的变量不会被扭转。而 ES6 之后，let，const 关键字能起到块级作用域的成果

接下来咱们来说说立刻执行函数的意义

IIFE(立刻执行函数)

当咱们开发一个网站时，往往会引入一些库，比方 JQuery 等，当咱们应用这些库时，假如这些库的写法都很乐色，没有暗藏其外部作用域，那么咱们将面临命名抵触。

为了解决这个问题，才有了模块化的概念，这个问题也在 ES6 中找到了答案，import export

在没有模块化之前，咱们罕用的办法是立刻执行函数（IIFE）

var a = 1;
(function () {
    var a = 2;
    console.log(a); // 2
})()
(function (name) {console.log(name); // johnny
})('johnny');
// jquery
(function(global, factory){})(typeof window !== "underfined" ? window: this, function(window, noGlobal){});

每一个援用的库引入就执行，变量存在于所在作用域中，库与库之间因为函数独立，所以命名办法互不影响，就不会勿扰到全局

换个形式了解：首先它是函数，所以它有作用域，作用域能起到变量存在函数中，不会裸露在全局中，就起到了变量不被净化；立刻执行就是间接调用函数，这样你引入库就能间接用了（个别库会挂载在 window 对象上）

匿名函数

没有函数名，好了解，就是个”工具人“

var foo = function () {console.log('hello world');
};
foo();
setTimeout(function () {console.log('hello,setTimeout');
});

立刻执行函数

就是间接调用它，怎么调用函数，加上 () 即可

(function () {console.log('hello world');
})();

匿名函数间接调用，这种写法能确保匿名函数中的变量是独立的。因为函数作用域中的变量外界不能拜访，变量就独立了

所以，立刻执行函数是函数，函数就有（函数）作用域，在作用域中变量就不会被外界影响

作用域设计

如下函数：

function doSomething(a) {b = a + doSomethingElse(a * 2);
    console.log(b * 3);
}

function doSomethingElse(a) {return a - 1;}
var b;

doSomething(2); // 15

你感觉这样的写法有问题吗？

尽管咱们我能够这样写函数，但因为作用域的起因（词法作用域：定义在哪里，就在哪里造成作用域），隐形的在全局建造了 doSomethingElse 的作用域，也就是说 doSomethingElse 和 doSomething 是同等级的作用域

但咱们想表白的是这个意思吗？

并不是，咱们心愿 doSomethingElse 能在 doSomething 函数中，它的作用域在 doSomething 作用域中

function doSomething(a) {function doSomethingElse(a) {return a - 1;}

    var b;

    b = a + doSomethingElse(a * 2);

    console.log(b);
}

doSomething(2); // 15

在设计上将具体内容私有化，无论是变量 b 还是函数 doSomethingElse 都属于 doSomething 的公有变量（或函数）。即全局作用域不能拜访 doSomethingElse，只有在 doSomething 函数中能力调用 doSomethingElse

总结

无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被申明时所处的地位决定

词法作用域意味着作用域是由书写代码时函数申明的地位来决定的。编译的词法分析阶段根本可能晓得全副标识符在哪里以及是如何申明的，从而可能预测在执行过程中如何对它们进行查找

词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因而当词法分析器解决代码时会放弃作用域不变（大部分状况下是这样的）

作用域在函数定义的时候就决定了。函数会保留一个 [[scope]] 属性，它保留了父作用域对象

参考资料

• 你不晓得的 JavaScript 上卷

系列文章

• 深刻了解 JavaScript- 开篇
• 深刻了解 JavaScript-JavaScript 是什么
• 深刻了解 JavaScript-JavaScript 由什么组成
• 深刻了解 JavaScript- 所有皆对象
• 深刻了解 JavaScript-Object（对象）
• 深刻了解 JavaScript-new 做了什么
• 深刻了解 JavaScript-Object.create
• 深刻了解 JavaScript- 拷贝的机密
• 深刻了解 JavaScript- 原型
• 深刻了解 JavaScript- 继承
• 深刻了解 JavaScript-JavaScript 中的始皇
• 深刻了解 JavaScript-instanceof——找祖籍
• 深刻了解 JavaScript-Function