原文：你不知道的js系列
A 动态作用域
动态作用域 是和 JavaScript中的词法作用域 对立的概念。
动态作用域和 JavaScript 中的另外一个机制 （this）很相似。
词法作用域是在代码编写时就定义好了的（假设没有使用 eval() 或者 with 欺骗词法作用域）
动态作用域也就意味着在运行时才能动态确定。
function foo() { console.log( a ); // 2 } function bar() { var a = 3; foo(); } var a = 2; bar();
词法作用域会对 foo() 中的 a 进行 RHS 引用查询，最后会得到全局变量 a 的值。
而动态作用域相反，它不关心函数和代码块声明的位置和方式，只关心他们在哪儿被调用。换句话说，作用域链是基于调用栈，而不是代码的嵌套。
所以，如果 JavaScript 有动态作用域，那么当 foo() 执行的时候，理论上输出的结果会是 3。
因为这时候，foo() 会从调用它的那个栈向上去查找 a ，就找到 bar() 内部的值为 3 的那个变量 a 了。
JavaScript 事实上不存在动态作用域，虽然 this 机制看起来想动态作用域。
词法作用域是代码编写时确定的，动态作用域（和 this）是在运行时确定的。
词法作用域关心的函数声明的位置，动态作用域关心的是函数被调用的位置。
最后：this 关心是一个函数调用的方式，关于这部分要去看 “this 和 对象原型” 的内容
B 块作用域的 Polyfill
在第（三）节中介绍了块作用域。在 ES3 的时候就已经存在以 with 和 catch 语句创建的块作用域了。
但是 ES6 引入了 let 之后才是对块作用域的完整支持，但是如果想在 ES6 之前的环境中使用块作用域应该怎么做？
比如下面的代码：
{ let a = 2; console.log( a ); // 2 } console.log( a ); // ReferenceError
在 ES6 之前的环境中可以这么做：
try{throw 2}catch(a){ console.log( a ); // 2 } console.log( a ); // ReferenceError
但是这样的代码既难看又奇怪。
其实，你可以使用一些工具将 ES6+ 的代码转译成可以在老版本的环境中运行的代码。
Tracer
Google 有一个叫做 Tracuer 的项目，它就是普遍用来转译 ES6 代码的工具。TC39 （ECMA 的 Technical Committee 39）依赖这个工具测试 JavaScript 的新特性。
它可以把上面的代码转成如下的代码：
{ try { throw undefined; } catch (a) { a = 2; console.log( a ); } } console.log( a );
隐式 vs. 显示的代码块
下面是另外一个 let 的形式，叫做 let 语句或者 let 块（相对于 let 声明）：
let (a = 2) { console.log( a ); // 2 } console.log( a ); // ReferenceError
这个 let 语句显式地创建了一个作用域绑定。这不仅是让块看起来更明显，在代码重构方面鲁棒性也更强，它把所以声明强制放在块的顶部，更容易分清块作用域包含了哪些内容。
与它对应的模式是，很多开发者在函数作用域的时候，也会将他们的 var 声明提前到函数的顶部。
这种 let 语句刻意将声明提前，如果你没有在代码中滥用 let 声明的话，你的块作用域声明会更容易识别和维护。
但是，ES6 中还没有支持 let 语句。官方的 Traceur 也不接受这种方式。
所以我们可以在代码中加一点注释：
/*let*/ { let a = 2; console.log( a ); } console.log( a ); // ReferenceError
性能
为什么不使用 IIFE 创建作用域呢？
首先，try/catch 的性能是比较低的，但它没有原因必须这么低。TC39 官方支持的 ES6 转译工具也使用 try/catch，所以 Traceur 团队已经让 Chrome 提升了 try/catch 的性能。
第二，IIFE 和 try/catch 没有可比性。将任何一段代码包装在一个函数中都可能会改变这段代码里面 return，this，break 以及 continue的含义。所以 IIFE 只适用于特定场景。
问题变了：你是否真的想要块作用域，如果需要，这些工具可以帮你实现。如果不需要，继续使用 var 写代码也没事的！
C 词法-this
ES6 添加了一个特殊的语法——箭头函数：
var foo = a => { console.log( a ); }; foo( 2 ); // 2
这个箭头经常被当作关键字 function 的简写形式。
但箭头函数不只是用来减少敲击键盘的次数的
下面的代码就有一个问题
var obj = { id: "awesome", cool: function coolFn() { console.log( this.id ); } }; var id = "not awesome"; obj.cool(); // awesome setTimeout( obj.cool, 100 ); // not awesome
在 setTimeout 中的 cool() 回调的 this 绑定丢了，通常的解决办法是在内部声明 var self = this；，如下：
var obj = { count: 0, cool: function coolFn() { var self = this; if (self.count < 1) { setTimeout( function timer(){ self.count++; console.log( "awesome?" ); }, 100 ); } } }; obj.cool(); // awesome?
这只是把整个问题从 理解和正确使用 this 绑定 回退到我们更使用起来更舒服的词法作用域上，self 成了一个标识符，不用关心 this 绑定发生了什么。
大家都不喜欢写冗余的东西，尤其是一遍又一遍重复这些东西。所以 ES6 出现了一个解决办法，箭头函数引入了一个现象叫做 “词法 this”
var obj = { count: 0, cool: function coolFn() { if (this.count < 1) { setTimeout( () => { // arrow-function ftw? this.count++; console.log( "awesome?" ); }, 100 ); } } }; obj.cool(); // awesome?
简单的解释就是箭头函数不像普通函数的 this 绑定一样，他们会将 this 的值绑定在当前的词法作用域中。
在这段代码中，this 的绑定 “继承” 了函数 coo() 绑定的 this。
箭头函数实际上只是将开发者普遍存在的错误写进了语法，因为他们将 this 绑定规则 和词法作用域混为一谈。
注：另一个箭头函数非议是他们都是匿名的，第（三）节介绍了为什么匿名函数不如命名的函数。
解决这个问题的另一个办法就是，正确使用 this绑定：
var obj = { count: 0, cool: function coolFn() { if (this.count < 1) { setTimeout( function timer(){ this.count++; // `this` is safe because of `bind(..)` console.log( "more awesome" ); }.bind( this ), 100 ); // look, `bind()`! } } }; obj.cool(); // more awesome
如果你完全理解了词法作用域和闭包，那么理解 词法this 的用法是轻而易举！小菜一碟