作用域、作用域链及闭包(一)

Escape_Master
909 阅读5分钟

正文

作用域是什么

作用域是一套规则，用于确定在何处以及如何查找变量。

了解作用域之前还要简单了解一下编译原理: 书中（你不知道的js）说道JavaScript是一门编译语言。在传统编译语言的流程中，程序中一段源代码在执行之前会经历三个步骤，统称为“编译”。

  • 分词/词法分析将字符串分解成有意义的代码块，代码块又称词法单元。
  • 解析/语法分析将词法单元流转换成一个由元素逐级嵌套所组成的代表了程序语法接口的数，又称“抽象语法树”。
  • 代码生成：将抽象语法树转换为机器能够识别的指令。

理解作用域

作用域与编译器、引擎进行配合完成代码的解析

书中举了个例子 对于 var a = 2 这条语句，首先编译器会将其分为两部分，一部分是 var a，一部分是 a = 2。编译器会在编译期间执行 var a，然后到作用域中去查找 a 变量，如果 a 变量在作用域中还没有声明，那么就在作用域中声明 a 变量，如果 a 变量已经存在，那就忽略 var a 语句。然后编译器会为 a = 2 这条语句生成执行代码，以供引擎执行该赋值操作。所以我们平时所提到的变量提升，其实就是利用这个先声明后赋值的原理。

作用域的工作模式

作用域共有两种主要的工作模型。第一种是最为普遍的，被大多数编程语言所采用的词法作用域( JavaScript中的作用域就是词法作用域)。另外一种是动态作用域，仍有一些编程语言在使用(比如Bash脚本、Perl中的一些模式等)。

异常情况

对于 var a = 10 这条赋值语句，实际上是为了查找变量 a， 并且将 10 这个数值赋予它，这就是 LHS 查询。 对于 console.log(a) 这条语句，实际上是为了查找 a 的值并将其打印出来，这是 RHS 查询。

为什么区分 LHS 和 RHS 是一件重要的事情？

在非严格模式下，LHS 调用查找不到变量时会创建一个全局变量，RHS 查找不到变量时会抛出 ReferenceError。 在严格模式下，LHS 和 RHS 查找不到变量时都会抛出 ReferenceError。

词法作用域

词法作用域是一套关于引擎如何寻找变量以及会在何处找到变量的规则。词法作用域最重要的特征是它的定义过程发生在代码的书写阶段(假设没有使用 eval() 或 with )

举个🌰

function testA() {
  console.log(a);  // 2
}

function testB() {
  var a = 3;
  testA();
}

var a = 2;

testB()
词法作用域让testA()中的a通过RHS引用到了全局作用域中的a，因此会输出2。

动态作用域

动态作用域只关心它们从何处调用。换句话说，作用域链是基于调用栈的，而不是代码中的作用域嵌套。

// 因此，如果 JavaScript 具有动态作用域，理论上，下面代码中的 testA() 在执行时将会输出3。
function testA() {
  console.log(a);  // 3
}

function testB() {
  var a = 3;
  testA();
}

var a = 2;

testB()

函数作用域

具名与匿名

书中举了个例子->回调函数

setTimeout( function() {
  console.log("我等了好久!")
}, 1000 )

其实这个叫函数匿名表达式，函数表达式可以匿名，而函数声明则不可以省略函数名。匿名函数表达式书写起来简单快捷,很多库和工具也倾向鼓励使用这种风格的代码。但它也有几个缺点需要考虑。

  • 匿名函数在栈追踪中不会显示出有意义的函数名,使得调试很困难。
  • 如果没有函数名,当函数需要引用自身时只能使用已经过期的 arguments.callee 引用,比如在递归中。另一个函数需要引用自身的例子,是在事件触发后事件监听器需要解绑自身。
  • 匿名函数省略了对于代码可读性/可理解性很重要的函数名。一个描述性的名称可以让代码不言自明。

针对于这种缺点，书中给出了建议：给函数表达式命名

setTimeout( function timeoutHandler() {
  console.log("我等了好久!")
}, 1000 )

提升

先提出个问题，现有赋值还是先有声明

a = 2;

var a;

console.log(a); // 2

等价于

var scope="global";
function scopeTest(){
    var scope;
    console.log(scope);
    scope="local"  
}
scopeTest(); //undefined

我们习惯将 var a = 2; 看作一个声明，而实际上 JavaScript 引擎并不这么认为。它将 var a 和 a = 2 当作两个单独的声明，第一个是编译阶段的任务，而第二个是执行阶段的任务。

这意味着无论作用域中的声明出现在什么地方，都将在代码本身被执行前首先进行处理。可以将这个过程形象地想象成所有的声明（变量和函数）都会被“移动”到各自作用域的最顶端，这个过程称为提升。

所以可以看出先有声明后有赋值

再看个小🌰

foo();  // TypeError
bar();  // ReferenceError

var foo = function bar() {
  // ...
};

这个代码片段经过提升后，实际上会被理解为以下形式:

var foo;
foo();  // TypeError
bar();  // ReferenceError

foo = function() {
  var bar = ...self...
  // ...
};

这段程序中的变量标识符 foo() 被提升并分配给全局作用域，因此 foo() 不会导致 ReferenceError。但是foo此时并没有赋值(如果它是一个函数声明而不是函数表达式就会赋值)。foo()由于对 undefined 值进行函数调用而导致非法操作，因此抛出 TypeError 异常。另外即时是具名的函数表达式，名称标识符(这里是 bar )在赋值之前也无法在所在作用域中使用。

结语

希望大家都能找到适合自己的学习方法重学前端，完善自己的知识体系架构~

avatar
文章
阅读
粉丝