03.函数作用域与作用域链

[toc]

一.作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

JavaScript（es6前）中的作用域有两种：

• 全局作用域
• 局部作用域（函数作用域）

1.1 全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

1.1.1 在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用

在全局作用域中：

• 创建的变量都会作为window对象的属性保存
• 创建的函数都会作为window对象的方法保存

全局作用域中的变量都是全局变量，在页面的任意部分都可以访问的到。

//全局作用域
     var a=123;
     var b="jason";
     function show(){
       console.log(b);//jason
     }
     show();
     //创建的变量都会作为window对象的属性保存
     console.log(window);
     console.log(window.a==a);//true
     console.log(window.b==b);//true
     console.log(window.a);//123

1.2 局部作用域（函数作用域）

作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。

1.3 JS 没有块级作用域

• 块作用域由 { } 包括。
• 在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码：

if(true){
  int num = 123;
  system.out.print(num);  // 123
}
system.out.print(num);    // 报错

1.4 作用域练习

      var a = 10,
        b = 20

      function fn(x) {
        var a = 100,
          c = 300;
        console.log('fn()', a, b, c, x)

        function bar(x) {
          var a = 1000,
            d = 400
          console.log('bar()', a, b, c, d, x)
        }

        bar(100) //'bar()',1000,20,300,400,100
        bar(200) //'bar()',1000,20,300,400,200
      }
      fn(10) //'fn()',100,20,300,10

image-20210621084451800

二.变量的作用域

2.1 变量作用域的分类

在JavaScript中，根据作用域的不同，变量可以分为两种：

• 全局变量
• 局部变量

2.2 全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。

• 全局变量在代码的任何位置都可以使用
• 在全局作用域下 var 声明的变量 是全局变量
• ==特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）==

2.3 局部变量

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

• 局部变量只能在该函数内部使用
• 在函数内部 var 声明的变量是局部变量
• 函数的形参实际上就是局部变量

2.3.1 函数中访问全局变量

在函数中要访问全局变量可以使用window对象。（比如说，全局作用域和函数作用域都定义了变量a,如果想访问全局变量，可以使用window.a）

• 提醒一：
  • 使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
  • 函数声明也会在函数中所有的代码执行之前执行

2.3.2 执行上下文

执行上下文：当函数执行时，会创建一个执行上下文的内部对象。每调用一次函数，就会创建一个新的上下文对象，他们彼此是相互独立的。每当函数执行完毕，它所产生的执行期上下文会被销毁。

当函数内部的变量被另外一个函数所引用，那么这个函数的变量将不会在执行完毕后销毁

作用域的上下级关系：当函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用（就近原则）。如果没有就向上一级作用域中寻找，直到找到全局作用域；如果全局作用域中依然没有找到，则会报错ReferenceError.

2.4 全局变量和局部变量的区别

• ==全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存==
• ==局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间==

三.作用域链

• 只要是代码，就至少有一个作用域
• 写在函数内部的局部作用域
• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
• ==根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链==

3.1 作用域理解

1. 理解

** 多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)*

** 查找变量时就是沿着作用域链来查找的*

2. 查找一个变量的查找规则

** 在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2*

** 在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3*

** 再次执行2的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常*

var a = 1
  function fn1() {
    var b = 2
    function fn2() {
      var c = 3
      console.log(c)//3
      console.log(b)//2
      console.log(a)//1
      console.log(d)//d is not defined
    }
    fn2()
  }
  fn1()

image-20210621085344114

3.2 练习一

image-20210516155154115

作用域链：采取==就近原则==的方式来查找变量最终的值。

3.3 练习二

四.变量提升

使用var关键字声明的变量（比如var a=1）,会在所有的代码执行之前被声明（但不会被赋值）,但是如果声明变量时不是用var关键字（比如说直接写a=1）,则变量不会被声明提前。

举例一：

console.log(a);//undefined;
var a=123;

打印结果：Undefined.(说明变量a被提前声明了，只是尚未被赋值)

//3.立即执行函数解决变量冲突问题
var a=123;
(function(){
   var a=456;//局部变量，用完就销毁
})()
console.log(a);//123

五.作用域与执行上下文

1. 区别1

全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时

全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建

函数执行上下文是在调用函数时, 函数体代码执行之前创建

2. 区别2

作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化

执行上下文是动态的, 调用函数时创建, 函数调用结束时就会自动释放

3. 联系

执行上下文(对象)是从属于所在的作用域

全局上下文环境==>全局作用域

函数上下文环境==>对应的函数使用域

六.面试题

6.1 面试题一：

var x = 10;

function fn() {
    console.log(x);
}

function show(f) {
    var x = 20;
    f();
}
show(fn); //10

image-20210621090725624

6.2 面试题二：

 var obj = {
     fn2: function () {
         //因为fn2没有加this，那么它自动指向window，所以fn2没有定义
         //console.log(fn2) //Uncaught ReferenceError: fn2 is not defined
         //this为这个这个对象obj
         console.log(this.fn2) //fn2
     }
 }
 obj.fn2()