前言： 之前我已经就作用域的理解写过一篇笔记，最近又看了《你不知道的JS》这本书；写一下新的分享。为避免有错误的理解，如果有困惑或者发现了我的误读，请不吝指出。
以下面的代码为例：
var a = 5;
var b = a;
传统编译语言的编译流程：
- 分词/词法分析：
将代码安照对应语言的规则，拆分成关键字； 如： var, a , =, 5 - 解析/语法分析：
根据语法，将关键字组成类似的“抽象语法树” （Abstract Syntax Tree，AST）{ VariableDeclaration : { Identifier: 'a', AssignmentExpression: { NumericLiteral: 5 } } }
3.代码生成
根据 AST 生成对应语言在当前操作系统的机器指令
然后机器指令将会分配部分内存存储变量 a 和 它的值。
JS 的编译过程
JS 的编译过程，相对于传统语言的编译相对更复杂。而且它是通常是即时编译即时执行。
上述代码中， JS 编译器将会安照如下流程操作：
- 声明变量
var a
var b
JS 首先在当前作用域查询是否有变量 a; 如果有，则忽略； 否则声明一个新变量， 并命名为 a. 同理 b.
这里我终于理解了为什么：使用 var 产生声明提前；重复声明时，会发生值的替换；
- 对 a 赋值
a = 2
对 a 进行 LHS 查询， 即当前作用域是否声明了变量 a；在当前作用域中无法找到某个变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量，或抵达最外层的作用域（也就是全局作用域）为止。
找到其变量容器，并赋予新的值；非严格模式下，当全局作用域也查找不到时，会在全局声明变量 a, 并对其赋值 5.
这里我终于理解了为什么：非严格模式下，局部作用域直接赋值一个为声明变量， 会产生一个全局变量；
- 对 b 赋值
b = a
首先对 a 进行 RHS 查询， 对 b 进行LHS 查询； 并将 a 的值 赋予给 b 的变量容器；
- RHS 简单地查找某个变量的值；发生在对这个变量的使用时
- LHS 查询则是试图找到变量的容器本身，从而可以对其赋值；发生在对这个变量的赋值时
函数声明和执行时的编译流程
function log(a) {
console.log(a)
}
log(2)
- 函数 log 的声明
首先 函数声明式声明和var log = function(){}的方式有所区别：
- 函数声明式声明， 会将一个 Function 实例的引用直接赋给 变量 log； 不进行 LHS；而且会提到最前面
var fn = 5;
function fn() {
console.log('this is fn')
}
console.log(fn) // 5
实际执行顺序如下：
// 先提升； 变量 fn 指向 Function 实例
function fn() {
console.log('this is fn')
}
// 后提升; 查询到当前作用域已经有 fn 变量, 忽略提升
var fn;
// fn 原本指向 Function 实例； 被后执行的 fn = 5 的赋值操作替换
fn = 5
console.log(fn) // 5
另一个例子
foo(); // 3
function foo() {
console.log( 1 );
}
var foo = function() {
console.log( 2 );
};
function foo() {
console.log( 3 );
}
实际执行顺序如下：
// 首先， 两个函数式声明被提升； 后者覆盖前者；
function foo() {
console.log( 1 );
}
function foo() {
console.log( 3 );
}
// 接着 var foo 提升， 但通过查询已声明 foo 而忽略
var foo;
// 然后执行 foo() 并输出 3
foo(); // 3
// 最后 foo 被重新赋值
foo = function() {
console.log( 2 );
};
- 而赋值函数的方式则像赋值普通变量一样, 先对查询是否声明 变量 log, 再在执行赋值时进行 LHS；
- log 的 RHS 查找
对 log 进行 RHS ； 查找到它的值指向的 Function 实例 - Function 实例的执行
执行 Function 实例时，会对参数 a 进行一个隐式的 LHS；即当前函数作用域内没有声明a 时，声明 a 并赋值为 5； 最后执行函数体。
块级作用域
- try catch ; ES3 标准
try{
undefined() // 某些报错的代码
} catch (err) {
console.log(err) // 正常打印
}
console.log(err) // ReferenceEorror 报错
- let const
{
let a = 'a'
const b = 'b'
var c = 'c'
function fn() {
console.log('fn')
}
}
fn() // 'fn'
console.log(c) // 'c'
console.log(b) // ReferenceEorror 报错
console.log(a) // ReferenceEorror 报错
作用域的应用
作用域的几个优点：
- 将非必要信息隐藏
- 避免全局的冲突
- 清除仅执行一次的代码
- 立即执行函数 IIFE（Immediately Invoked Function Expression）
创建一个 Function 实例，执行后立即清除；
应用一： 仅需执行一次的代码片段， 不需要产生全局变量
// 设定一个参数 global
// 来区分内部作用域和全局作用域的变量；可以避免同名变量的“遮蔽效应”
var a = 111;
(function(global) {
var a = 222;
console.log(a); // 222
console.log(global.a); // 111
})(window)
应用二： 间隔 1 秒，依次打印 1，2，3，4，5
// 此时所有的回调都会在循环结束时触发；
// 因为函数调用的都是全局作用域的 i， 而此时 i 为 6； 不是我们想要的
for (var i=1; i<=5; i++) {
setTimeout( function timer() {
console.log( j );
}, j*1000 );
}
// 通过自执行函数创造的局部作用域；
// 此时参数 j 保留了循环器依次产生的 i
for (var i=1; i<=5; i++) {
(function(j) {
setTimeout( function timer() {
console.log( j );
}, j*1000 );
})( i );
}
- 回调函数
回调函数内部的变量，不会被外部访问到
setTimeout(function() {
}, 1000)
- let const 创造块级作用域
对于上述，间隔 1 秒依次打印 1，2，3，4，5 的例子； 可以简单的使用 let 制造块级作用域来解决
for (let i=1; i<=5; i++) {
setTimeout( function timer() {
console.log( i );
}, i*1000 );
}
网友评论