深入了解JavaScript词法作用域
JavaScript并不是传统的块级作用域，而是函数作用域！
一、作用域
- JavaScript引擎在代码执行前会对其进行编译，在这个过程中，像vara=2这样的声明会被分解成两个独立的步骤：
第一步（编译阶段）：vara在其作用域中声明新变量。这会在最开始的阶段，也就是代码执行前进行。
第二步（运行阶段）：a=2会查询变量a（LHS查询）并对其进行赋值。
- LHS&RHS（当前作用域->上级作用域->...->全局作用域）
LHS(左侧)：试图找到变量的容器本身
RHS(右侧)：查找某个变量的值
示例：
functionfoo(a){
varb=a;
returna+b;
}
varc=foo(2);
//LHS(3处)：c；a(隐式变量分配)；b;
//RHS(4处)：foo(2)；=a；a；b；
- 异常
functionfoo(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函数可以接受一个字符串参数，并将其中的内容视为好像在书写时存在于程序中这个位置的代码（在当前位置，可生成代码，并运行）。
eval可以对一段包含一个或多个声明的“代码”字符串进行演算，并借此修改已经存在的词法作用域（运行阶段）。
functionfoo(str,a){
eval(str);
console.log(a,b); //1,3
console.log(a,window.b); //1,2
}
varb=2;
foo("varb=3;",1);
解释：上述全局变量b被覆盖了，由于b是全局的，可以window.b获取到；但非全局的变量如果被覆盖，就无法访问到了！
严格模式下：
functionfoo(str,a){
"usestrict";
eval(str);
console.log(a,b); //1,2
console.log(a,window.b); //1,2
}
varb=2;
foo("varb=3;",1);
- with
with通常被当作重复引用一个对象中的多个属性的快捷方式，可以不需要重复引用对象本身。
with将对象的属性当作作用域中的标识符来处理，从而创建了一个新的词法作用域（运行阶段）。
functionfoo(obj){
with(obj){
a=2;
}
}
varo1={a:3};
varo2={b:3};
foo(o1);
console.log(o1.a); //2
foo(o2);
console.log(o2.a); //undefined
console.log(a); //2，表明a泄漏到全局作用域上了！
这两个机制的副作用是引擎无法在编译时对作用域查找进行优化，导致代码运行速度变慢，建议不要使用它们！
PS：从原理上阐述了博客《JavaScript语言精粹【糟粕、毒瘤】》中with不能使用的原因！！！
三、函数作用域和块作用域
匿名和具名
/*匿名（引用自身只能用过期的arguments.callee引用）*/
setTimeout(function(){
console.log("iwait1second!")
},1000);
/*具名（可读性好）*/
setTimeout(functiontimeoutHandler(){
console.log("iwait1second!")
},1000);
立即执行函数表达式
/*IIFE模式*/
vara=2;
(functionIIFE(global){
vara=3;
console.log(a); //3
console.log(global.a); //2
})(window);
/*UMD模式*/
varb=2;
(functionUMD(def){
def(window);
})(functiontmpF(global){
varb=3;
console.log(b); //3
console.log(global.b); //2
});
块作用域
try/catch会创建一个块作用域
try{
undefined();
}catch(err){
console.log(err); //可以正常使用
}
console.log(err); //ReferenceError:errisnotdefined
/*坑1*/
for(vari=0;i<10;i++){}
console.log(i); //10
/*坑2*/
{
console.log(bar); //undefined不会报错！！
varbar=2;
}
ES6中引入新的let关键字！！
/*填坑1*/
for(leti=0;i<10;i++){}
console.log(i); //SyntaxError:Block-scopeddeclarations(let,const,function,class)notyetsupportedoutsidestrictmode
/*填坑2*/
{
console.log(bar); //SyntaxError报错！！
letbar=2;
}
推荐两个将ES6代码转化成兼容ES6之前的环境（大部分是ES5，但不全是）工具：Traceur和let-er
以上就是深入了解JavaScript词法作用域的详细内容，更多关于JavaScript词法作用域的资料请关注毛票票其它相关文章！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。