作用域

JavaScript中的作用域分为全局作用域函数作用域块作用域

全局作用域

对于全局范围内声明的变量,可以在任何地方访问。

1
2
3
4
5
var messge = 'Hello'
function say(){
  console.log(message)
}
say(); // Hello

函数作用域

在函数内声明的变量,只能从该函数内部访问。

1
2
3
4
5
6
function say() {
  var messge = 'Hello';
  console.log(messge);
}
say(); // Hello
console.log(greeting); // ReferenceError: messge is not defined

块作用域

ES6 引入了letconst 关键字,它们声明的变量只能从该代码块内访问。

1
2
3
4
5
{
  let messge = 'Hello';
  console.log(messge);
}
console.log(messge); // ReferenceError: messge is not defined

静态作用域

在词法分析时(编译时)确定。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let number = 42;
function printNumber() {
  console.log(number);
}
function log() {
  let number = 54;
  printNumber();
}

log(); // 42

作用域链

JavaScript运行时,引擎首先会在当前范围内查找变量,如果找不到,会向父作用域查一层一层向上查找,一直找到顶层全局作用域,如果还是找不到就返回undefined

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var g = 'Global hello'
function f1() {
    var g1 = 'G1 hello';
    function f2() {
        var g2 = 'G2 hello'
        function f3() {
            console.log(g, g1, g2)
        }
      	f3()
    }
  	f2();
}
f1(); // Global hello G1 hello G2 hello

image-20211024201823243

运行分析

执行上下文

执行上下文是执行一段 JavaScript 的环境,它存储了执行代码的一些必要信息。执行上下文分全局执行上下文函数执行上下文

  • 全局执行上下文,一个程序中只会有一个,函数之外的代码都在全局执行上下文中运行。

  • 函数执行上下文,函数在每次调用时都会创建一个对应的函数执行上下文

执行上下文的包含变量环境Variable environment),作用域链Scope chain),this 指向。

  • 变量环境,函数内部所有的变量和对象引用和调用参数。
  • 作用域链,当前函数之外的变量的引用组成。
  • this 指向。

从JavaScript运行时的内存结构来看,调用栈就是存储执行上下文的集合。

image-20211024174139675

案例

案例一

这是一个普通的JavaScript例子,运行流程分析:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var msg = 'Global hello'

function say() {
    var msg = 'Hello'
  	return msg;
}

var s = say();
console.log(message) // Hello

  1. 创建全局执行上下文,然后入调用栈。
  2. 调用函数say(),创建say()函数执行上下文,并入调用栈。
  3. 执行完say()函数将结果返回,更新全局执行上下文里的s 变量。
  4. say 函数的执行上下文弹出栈。

image-20211024184307452

image-20211024184942127

案例二

这个例子跟上面不同的是返回值是函数,这个匿名函数也称闭包,它访问了函数外部的变量,即使外部函数执行上下文被弹出栈后,它依然可以持有外部变量的引用。运行分析如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var msg = 'Global hello'

function say() {
    var msg = 'Hello'
    return function() {
        console.log(msg)
    };
}

var s = say();
s()

  1. 创建全局执行上下文,然后入调用栈。
  2. 调用函数say(),创建say()函数执行上下文,并入调用栈。
  3. 执行完say()函数将结果返回,更新全局执行上下文里的s 变量,s 是函数类型,它依然持有say var = msg 引用。
  4. say 函数的执行上下文弹出栈。
  5. 执行 s() ,创建s()函数执行上下文
  6. s() 函数的执行上下文弹出栈。

image-20211024191627578

思考题

在脑海里动态执行下面代码。

题目一:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var msg = 'Global hello'

function getMsgFunc() {
    var msg = 'Hello';
    function getMsg() {
        return msg;
    }
    return getMsg();
}
console.log(getMsgFunc());

题目二:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var msg = 'Global hello'

function getMsgFunc() {
    var msg = 'Hello';
    function getMsg() {
        return msg;
    }
    return getMsg;
}
console.log(getMsgFunc()());

题目三:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
	 var msg = 'Global hello'

  var obj = {
    msg : 'Hello',

    getMsgFunc : function(){
      return function(){
        return this.msg;
      };
    }
  };
  console.log(obj.getMsgFunc()());

题目四:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
	 var msg = 'Global hello'

  var obj = {
    msg : 'Hello',

    getMsgFunc : function(){
      		var that = this
      return function(){
        return that.msg;
      };
    }
  };
  console.log(obj.getMsgFunc()());