深入了解JavaScript词法作用域

JavaScript并不是传统的块级作用域，而是函数作用域！

一、作用域

第一步（编译阶段）：var a 在其作用域中声明新变量。这会在最开始的阶段，也就是代码执行前进行。第二步（运行阶段）：a = 2 会查询变量a（LHS查询）并对其进行赋值。

LHS(左侧)：试图找到变量的容器本身RHS(右侧)：查找某个变量的值

示例：

function foo(a){var b = a;return a + b;}var c = foo(2);// LHS(3处)：c；a(隐式变量分配)；b;// RHS(4处)：foo(2)；=a；a；b； 异常

function foo(a){console.log(a + b);b = a;}foo(2);

（1）在ES5“严格模式”下，LHS抛出ReferenceError；“非严格模式”下，LHS会自动隐式的创建一个全局变量。

（2）RHS查询在所有嵌套的作用域中遍寻不到所需遍历会抛出ReferenceError。

（3）RHS查询到一个变量，但你尝试对其不合理的操作（引用null或undefined类型中的属性），会抛出TypeError。

一句话概括之：ReferenceError同作用域判别失败相关；而TypeError则代表作用域判别成功了，但是对结果的操作是非法或不合理的。

PS：从原理上阐述了博客中《JavaScript函数及其prototype》函数执行覆盖等问题！！！

二、词法作用域

词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。JavaScript中有两个机制可以“欺骗”词法作用域：eval(...)和with。

eval函数可以接受一个字符串参数，并将其中的内容视为好像在书写时存在于程序中这个位置的代码（在当前位置，可生成代码，并运行）。eval可以对一段包含一个或多个声明的“代码”字符串进行演算，并借此修改已经存在的词法作用域（运行阶段）。

function foo(str,a){eval(str);console.log(a, b);//1 , 3console.log(a, window.b);//1 , 2}var b = 2;foo('var b = 3;', 1);

解释：上述全局变量b被覆盖了，由于b是全局的，可以window.b获取到；但非全局的变量如果被覆盖，就无法访问到了！严格模式下：

function foo(str,a){'use strict';eval(str);console.log(a, b);//1 , 2console.log(a, window.b);//1 , 2}var b = 2;foo('var b = 3;', 1); with

with通常被当作重复引用一个对象中的多个属性的快捷方式，可以不需要重复引用对象本身。with将对象的属性当作作用域中的标识符来处理，从而创建了一个新的词法作用域（运行阶段）。

function foo(obj){with(obj){a = 2;}}var o1 = { a : 3 };var o2 = { b : 3 };foo(o1);console.log( o1.a );// 2foo(o2);console.log( o2.a );// undefinedconsole.log( a );// 2，表明a泄漏到全局作用域上了！

这两个机制的副作用是引擎无法在编译时对作用域查找进行优化，导致代码运行速度变慢，建议不要使用它们！

PS：从原理上阐述了博客《 JavaScript语言精粹【糟粕、毒瘤】》中with不能使用的原因！！！

三、函数作用域和块作用域

匿名和具名

/* 匿名（引用自身只能用过期的arguments.callee引用） */setTimeout(function(){console.log('i wait 1 second!')},1000);/* 具名（可读性好） */setTimeout(function timeoutHandler(){console.log('i wait 1 seco nd!')},1000);

立即执行函数表达式

/* IIFE模式 */var a = 2;(function IIFE(global){var a = 3;console.log(a);//3console.log(global.a);//2})(window);/* UMD模式 */var b = 2;(function UMD(def){def(window);})(function tmpF(global){var b = 3;console.log(b);//3console.log(global.b);//2});

块作用域

try/catch会创建一个块作用域

try{undefined();}catch(err){console.log(err);//可以正常使用}console.log(err);//ReferenceError: err is not defined/* 坑1 */for(var i=0;i<10;i++){}console.log(i);//10/* 坑2 */{console.log(bar);//undefined 不会报错！！var bar = 2;}

ES6中引入新的let关键字！！

/* 填坑1 */for(let i=0;i<10;i++){}console.log(i);//SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode/* 填坑2 */{console.log(bar);//SyntaxError 报错！！let bar = 2;}

推荐两个将ES6代码转化成兼容ES6之前的环境（大部分是ES5，但不全是）工具：Traceur和let-er

以上就是深入了解JavaScript词法作用域的详细内容，更多关于JavaScript词法作用域的资料请关注好吧啦网其它相关文章！