重学Javascript（三）一文完全理解JavaScript做用域

前言

从这篇文章开始，算是正式进入了重学JavaScript的正轨，做用域与做用域链是JavaScript的重要概念之一，深刻理解做用域对理解JavaScript闭包，执行上下文等概念都有很大的帮助。

骚话没想好，直接开始正文吧

什么是做用域

做用域（scope）是指程序源代码中定义变量的区域，简单来讲，一段程序代码中所用到的变量并不老是有效的，而限定这个变量的可用性的代码范围就是这个变量的做用域。

在JavaScript中使用的做用域是静态做用域（词法做用域），特色就是变量的做用域在变量定义时肯定。下文所说的做用域都指代静态做用域。

全局做用域

全局做用域是最外围的一个做用域。根据 ECMAScript 实现所在的宿主环境不一样，表示全局做用域的对象也不同。在浏览器中，全局做用域就是window对象，node则是global对象。

拥有全局做用域的变量能够在全部做用域中被访问，假如将全局做用域比喻为中国，中国人这个属性拥有全局做用域，不管你是浙江人仍是杭州人理所担任均可以说是中国人。

在JavaScript中通常有如下三种情形拥有全局做用域：

1.window（global）下的属性或者方法

global.nationality = 'Chinese'

function province () {
    var province = '浙江'
    console.log(nationality)
}

province()   //Chinese
复制代码

2.最外层的变量或者函数

var country = '中国'

function province () {
    var province = '浙江'
    return province
}

function city () {
    var city = '杭州'
    console.log(country,province(),city)
}

city()   //中国 浙江 杭州
复制代码

3.未定义直接赋值的变量

function province () {
    var province = '浙江'
    Country = '中国'
    return province
}

function city () {
    var city = '杭州'
    console.log(Country,province(),city)
}

city()  //中国 浙江 杭州
复制代码

局部做用域

和全局做用域相反，局部做用域通常只在固定的代码片断内可访问到，最多见的是函数内部。

函数做用域

定义在函数中的变量就处于函数做用域中。不一样函数做用域中，变量不能相互访问。仍是按照上面的例子举例，

若是你是浙江人，你能够说你是中国人，可是你不能说你是福建人。固然若是你是杭州人，你能够说本身是浙江人，由于浙江的函数做用域包含了杭州的函数做用域。

简单来讲就是里面的能够访问外面的做用域，可是不能访问里层的和同级的做用域

块级做用域

JavaScript 自己是没有块级做用域，这就常常会致使理解上的困惑。

function province () {
    console.log(province)  //undefined
    var province = '浙江'
}
复制代码

好比上述的代码，我但愿打印出的实际上是province函数自己，可是因为，下方声明了province变量，致使其province变量获得提高,等价于下面代码。

function province () {
  	var province
    console.log(province)  //undefined
    province = '浙江'
}
复制代码

所以ES6 引入了块级做用域，让变量的生命周期更加可控，使用let和const声明的变量在指定块（简单理解就是一对花括号）的做用域外没法被访问。

可是这个并不能解决上面个人问题，由于let声明会致使暂时性死区，我并不能获取全局的province函数，并且还会报错。后面应该还会写一个ES6的系列，用于整理ES6的新特性。感兴趣的能够去搜索相关的文章，这边就不赘述了。

预编译

再讲做用域链以前，仍是但愿在这边讲一下JavaScript的预编译，理解这一部分，做用域链就如同脱光衣服的。。。

上面其实咱们已经接触到一部分了，可是并不系统，在好久以前，我会用函数变量声明提高，函数申明的优先级优于变量申明，函数申明会带函数体一块儿提高等口诀来解决这些问题。可是随着学习的深刻，这些口诀并不能准确有效的解决复杂场景下的问题，例以下面这个例子

function a(a){
  var a =a+1
  console.log(a)  // 2
}
var a
a(1)
console.log(a) // [Function: a]
复制代码

遇到这种问题，最好的方法就是了解预编译，由于它的存在本就是用于解决执行顺序问题。

咱们须要知道JavaScript在运行中会进行三个步骤,语法分析、预编译和解释执行

在执行完JavaScript的语法分析后，就会进入全局预编译环节

1.生成一个全局对象或者叫作全局执行上下文（我一直不习惯这么叫，以为太拗口）因此下面就用GO（Global Object）来，GO只有一个，浏览器中的GO其实就是 window 对象 GO={}

2.将变量声明做为属性名挂载在GO上，值为undefined GO.a=undefined

3.找函数声明，并将函数名做为GO对象的属性名，值为函数体。GO.a=[Function: a]

若是执行过程当中遇到函数，就会触发局部预编译，函数的局部预编译发生在函数执行前的一刻。 a(1)

1.生成一个活动对象或者叫作局部执行上下文，为了统一下面就用AO（Active Object）来表示，AO能够有无数个，每次调用函数都会建立一个新的AO. AO={}

2.找形参和变量声明,将变量和形参名做为AO的属性名,值一样为undefined. AO.a=undefined

3.将AO的形参的值改成实参值. AO.a=1

4.在该函数体里面找函数声明，值为函数体

完全理解预编译，就能够明白不一样执行阶段变量的值，不管再复杂的的题，对你来讲都没有区别了。

做用域链

消化吸取了以前的预编译以后，咱们就能够去了解做用域链了，做用域链最泛用的场景就是函数，因此下面例子都是以函数为主体，话很少说，先看例子。

var z = 1 
function tim(){
   function cope(){
       var x= 2;
       y=3
   }
   var y = 4
   cope()
   console.log(y)  // 3
}

tim()
复制代码

运行代码以后咱们就能够发现输出为3，那么做为cope做用域中的值3是怎么在tim做用域中输出的呢？

答案就是做用域链。

每一个JavaScript对象都有属性，有些能够被咱们访问，有些却不行，这些属性仅供js引擎存取，而咱们接下来要讲的[[scope]]就是这样的一个属性。

当函数被定义时它就被绑定了[[scope]]属性，而[[scope]]中存储的就是执行上下文的集合（GO | AO），其呈链式连接，咱们称之为做用域链。让咱们再回头来看以前的例子

var z = 1 
//1.tim 定义 tim.[[scope]] = GO:{z:1,tim:[Function: tim]}
function tim(){
  //3.cope定义 cope.[[scope]] = tim.[[scope]] = tim(AO):{cope:[Function: cope],y:undefined}=>GO
   function cope(){
       var x= 2;
     	 // 6.cope(AO)上没有y属性，就会沿着做用域链往上找，一直没有就会挂载在GO上
       y=3
   }
  //4.tim(AO):{cope:[Function: cope],y:4}
   var y = 4
   //5.cope.[[scope]] = cope(AO):{x:undefined}=>tim(AO)=>GO
   cope()
  //7.tim(AO):{cope:[Function: cope],y:4}
   console.log(y)  // 3
}
//2.tim 执行 tim.[[scope]] = tim(AO):{cope:[Function: cope],y:undefined}=>GO:{z:1,tim:[Function: tim]}
tim()
复制代码

按照代码运行的顺序大体就是如此，不熟悉的可能须要三五分钟仔细消化一下这个流程。

简单总结一下

1.做用域链存储的就是执行上下文的集合

2.当前做用域中没有使用未在在做用域定义的变量时，会沿着做用域链向上找。

写在最后

文章写到这差很少就结束了，在语义表达和理解方面可能存在很多漏洞，若是存在问题但愿各位大佬不吝指正。讲述完了做用域与做用域链，那接下来就不得不提之前很让我头疼的闭包了，不过有了这篇文章铺垫，我相信理解闭包的过程将变得十分愉快，因此下篇见咯。

参考

1. Dmitry Soshnikov dmitrysoshnikov.com/ecmascript/…