JavaScript中的作用域和预解析

回顾

上一篇中我们主要说了 js 的函数，牵扯到函数的概念与使用，以及函数的传参和调用等方面的内容，函数是js中最具代表意义的功能，也是未来十分常用技术点。文章内容都是非常之基础，如果想了解深入建议多看看红宝书等书籍。

这篇中我们要说一下 js 中的作用域和预解析，对于正常思维考量，你一定会觉得这部分内容会有不解，特别是针对预解析的内容，但是没关系，你可以尝试的多了解了解 js 的发展历程等原因会发现语言的发展绕不开它本身当下的环境和所处时代等多种因素。

作用域

作用域：是代码名字（变量）在某个范围内起到的作用和效果，目的是为了提高程序的可靠性和减少命名冲突。

js（es6之前）一般分为：全局作用域、局部作用域

• 全局作用域：整个script 标签，或者是一个单独的js文件

• 局部作用域：在某个函数内，或者某个块内部

变量的作用域：变量也会根据不同的作用域分为两种

• 全局变量：在全局作用下声明
  注意：全局变量只有在浏览器关闭的时候才会销毁，比较占用内存资源

• 局部变量：在局部（某个函数或方法）作用下声明
  注意：局部变量当我们程序执行完毕之后会自动销毁，比较节约内存资源

不过在某个函数或者方法没有声明直接赋值的变量也属于全局变量。但是函数的形参算是局部变量。

在作用域中还有一个比较重要的点是：作用域链（这个具体复习到es6会着重说明），暂时需要知道的是作用域链是链式查找的过程，指：如果内部函数或者方法中没有找到相应的值会逐层向外进行查找。

// 作用域链，如果内部函数找不到会逐层向外查找
function name1 () {
  var num = 1
  console.log('111', num) // 1

  function name2 () {
    console.log('222', num)  // 1
  }
  name2()
}
name1()

可以看到在上述中 name2 函数中是没有声明 num，但是输出需要num 值，所以它会依次的向上查找，如果找到就返回，如果找不到就会报错。这也印证了另外一点，内部函数是可以访问外部函数的。

预解析

预解析：js引擎会把 js 里面所有的 var 还有 function 提升到当前作用域的最前面，然后按照代码书写的顺序依次从上到下执行

预解析分为变量预解析（变量提升）和函数预解析（函数提升）

• 变量提升：就是把所有的变量声明提升到当前作用域最前面，不提升赋值

• 函数提升：就是把所有的函数声明提升到当前作用域的最前面 不调用函数

例如：如下例子

案例一：

原函数：
function name() {
  console.log(name)  // undefined
  var name = 'andy'
}
name()

实际上js执行顺序：
function name() {
  var name
  console.log(name)  // undefined
  name = 'andy'
}
name()

这是因为 var 声明的变量会造成变量提升，var 和 function 声明的变量和函数都会提升到当前作用域的最前面

案例二：

原函数：
fn()  //  11

function fn () {

 console.log(11)
 
}

实际 js 执行顺序：
// 同样，函数也会被提升到最前面
function fn () {

 console.log(11)
 
}
fn()

案例三：

原函数：
fun()  //  fun is not a function
var fun = function () {
  console.log(11)
}

实际 js 执行顺序
var fun
fun()
fun = function() {
 console.log(11)
}

好了，今天的内容就到这里了，作用域和预解析是javascript 中最具代表性的特点之一。可以自己在编辑器中多打印出来看看，也可以借助调试工具看看运行机制等。内容都是相当入门级别的，仅仅是帮助你了解或是回顾。有什么问题欢迎随时留言~