[第18期] 一文搞清 Javascript 中的「上下文」

背景

上下文是 Javascript 中的一个比较重要的概念， 可能很多朋友对这个概念并不是很熟悉， 那换成「作用域」 和 「闭包」呢？是不是就很亲切了。

「作用域」，「闭包」 都是和「执行上下文」密切相关的两个概念。

在解释「执行上下文」是什么之前， 我们还是先回顾下「作用域」 和 「闭包」。

正文

1. 作用域

什么是作用域呢？

域， 即是范围。

作用域，其实就是某个变量或者函数的可访问范围。

它控制着变量和函数的可见性和声明周期。

作用域也分为：「全局作用域 」和 「局部作用域」。

全局作用域

如果一个对象在任何位置都能被访问到， 那么这个对象， 就是一个全局对象， 拥有一个全局作用域。

拥有全局作用域的对象可以分为以下几种情况：

1. 定义在最外层的变量
2. 全局对象的属性
3. 任何地方隐式定义的变量（即：未定义就直接赋值的变量）。 隐式定义的变量都会定义在全局作用域中。

局部作用域

JavaScript的作用域是通过函数来定义的。

在一个函数中定义的变量， 只对此函数内部可见。

这类作用域，称为局部作用域。

还有一个概念和作用域联系密切， 那就是作用域链。

作用域链

作用域链是一个集合， 包含了一系列的对象， 它可以用来检索上下文中出现的各类标识符(变量， 参数， 函数声明等)。

函数在定义的时候, 会把父级的变量对象AO/VO的集合保存在内部属性 [[scope]] 中，该集合称为作用域链。

AO : Activation Object 活动对象

VO : Variable object 变量对象

Javascript 采用了词法作用域(静态作用域)，函数运行在他们被定义的作用域中，而不是他们被执行的作用域。

看个简单的例子 ：

var a = 3;

function foo () {
  console.log(a)
}

function bar () {
  var a = 6
  foo()
}

bar() // 3

如果 Javascript 采用动态作用域，打印出来的应该是6而不是3.

这个例子说明了javasript是静态作用域。

此函数作用域链的伪代码：

function bar() {
  function foo() {
       // ...
    }
}

bar.[[scope]] = [
  globalContext.VO
];

foo.[[scope]] = [
    barContext.AO,
    globalContext.VO
];

函数在运行激活的时候，会先复制 [[scope]] 属性创建作用域链，然后创建变量对象VO，然后将其加入到作用域链。

executionContextObj: {
  VO: {}，
  scopeChain: [VO, [[scope]]]
}

总的来说， VO要比AO的范围大得多， VO是负责把各个调用的函数串联起来的。

VO是外部的， 而AO是函数自身内部的。

与AO, VO 密切相关的概念还有GO, EC ， 感兴趣的朋友可以自行查阅相关资料。

下面我们说一下闭包。

闭包

闭包也是面试中经常会问到的问题， 考察的形式也很灵活， 譬如：

• 描述下什么是闭包
• 写一段闭包的代码
• 闭包有什么用
• 给你一个闭包的例子，让你修改， 或者看输出

那闭包究竟是什么呢？

说白了， 闭包其实也就是函数， 一个可以访问自由变量的函数。

自由变量： 不在函数内部声明的变量。

很多所谓的代码规范里都说， 不要滥用闭包， 会导致性能问题， 这个说法被人提出来，也是有一些原因的。

毕竟，闭包里的自由变量会绑定在代码块上，在离开创造它的环境下依旧生效，而使用代码块的人可能无法察觉。

闭包里的自由变量的形式有很多，举个简单例子。

function add(p1) {
   return function(p2) {
     return p1 + p2;
  }
}

var a = add(1);
var b = add(2);

a(1) //2
b(1) // 3

在上面的例子里，a 和 b这两个函数，代码块是相同的，但若是执行a(1)和b(1)的结果却是不同的，原因在于这两者所绑定的自由变量是不同的，这里的自由变量其实就是函数体里的 p1 。

自由变量的引入，可以起到和OOP里的封装同样作用，我们可以在一层函数里封装一些不被外界知晓的自由变量，从而达到相同的效果， 很多模块的封装， 也是利用了这个特性。

然后说一下我遇到的真实案例， 是去年面试腾讯QQ音乐的一道笔试题：

for (var i = 1; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i)
    }, i * 1000)
}

这段代码会输出一堆 6， 让你改一下， 输出 1， 2， 3， 4， 5

解决办法还是很多的， 就简单说两个常见的。

1. 用闭包解决

for (var i = 1; i <= 5; i++) {
    (function (j) {
        setTimeout(function timer() {
            console.log(j);
        }, j * 1000);
    })(i);
}

使用立即执行函数将 i 传入函数内部。

这个时候值就被固定在了参数 j 上面不会改变，当下次执行 timer 这个闭包的时候，就可以使用外部函数的变量 j ，从而达到目的。

2. [推荐] 使用 let

for (let i = 1; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i);
    }, i * 1000);
}

const , let 的原理和相关细节可以参考我的另一篇：

[第13期] 掌握前端面试基础系列一：ES6

解释完这两个概念，就回到我们的主题， 上下文。

执行上下文

首先， 执行上下文是什么呢？

简单来说， 执行上下文就是Javascript 的执行环境。

当 Javascript 执行一段可执行代码的时候时，会创建对应的执行上下文。

组成如下:

executionContextObj = {
    this,
    VO,
    scopeChain: 作用域链, 跟闭包相关
}

由于JS是单线程的，一次只能处理一件事情，其他任务会放在指定上下文栈中排队。

Javascript 解释器在初始化执行代码时，会创建一个全局执行上下文到栈中，接着随着每次函数的调用都会创建并压入一个新的执行上下文栈。

函数执行后，该执行上下文被弹出。

执行上下文建立的步骤：

创建阶段

1. 初始化作用域链
2. 创建变量对象
   1. 创建arguments
   2. 扫描函数声明
   3. 扫描变量声明
3. 求 this

执行阶段

1. 初始化变量和函数的引用
2. 执行代码

this

this 是Javascript中一个很重要的概念， 也是很多初级开发者容易搞混到的一个概念。

这里我们就好好说道说道。

首先， this 是运行时才能确认的， 而非定义时确认的。

在函数执行时，this 总是指向调用该函数的对象。

要判断 this 的指向，其实就是判断 this 所在的函数属于谁。

this 的执行，会有不同的指向， 大概可以分为：

• 指向调用对象
• 指向全局对象
• 用 new 构造就指向新对象
• apply/call/bind, 箭头函数

我们一个个来看。

1. 指向调用对象

function foo() {
  console.log( this.a );
}

var obj = {
  a: 2,
  foo: foo
};

obj.foo(); // 2

2. 指向全局对象

这种情况最容易考到， 也最容易迷惑人。

先看个简单的例子：

var a = 2;

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

没什么疑问。

看个稍微复杂点的：

function foo() {
    console.log( this.a );
}

function doFoo(fn) {
    this.a = 4
    fn();
}

var obj = {
    a: 2,
    foo: foo
};

var a = 3
doFoo( obj.foo ); // 4

对比：

function foo() {
  this.a = 1 console.log(this.a);
}

function doFoo(fn) {
  this.a = 4 fn();
}
var obj = {
    a: 2,
    foo: foo
};
var a = 3 doFoo(obj.foo); // 1

发现不同了吗？

你可能会问， 为什么下面的a不是doFoo 的a呢？

难道是foo里面的 a 被优先读取了吗？

不是的。打印foo和doFoo的this，就可以知道，他们的this都是指向window的。

他们的操作会修改window中的a的值。并不是优先读取foo中设置的a。

简单验证一下：

function foo() {
  setTimeout(() => this.a = 1, 0)
  console.log( this.a );
}

function doFoo(fn) {
  this.a = 4
  fn();
}

var obj = {
  a: 2,
  foo: foo
};

var a = 3
doFoo(obj.foo); // 4
setTimeout(obj.foo, 0) // 1

结果证实了我们上面的结论，并不存在什么优先。

3. 用new构造就指向新对象

var a = 4
function A() {
  this.a = 3 
  this.callA = function () {
     console.log(this.a)
  }
}
A() // 返回undefined, A().callA 会报错。callA被保存在window上
a = new A()
a.callA() // 3, callA在 new A 返回的对象里

3. apply/call/bind

这个大家应该都很熟悉了。

令this指向传递的第一个参数，如果第一个参数为null，undefined或是不传，则指向全局变量。

var a = 3
function foo() {
  console.log( this.a );
}
var obj = {
  a: 2
};
foo.call(obj); // 2
foo.call(null); // 3
foo.call(undefined); // 3
foo.call(); // 3

var obj2 = {
  a: 5,
  foo
}
obj2.foo.call() // 3，不是5

//bind返回一个新的函数
function foo(something) {
  console.log(this.a, something);
  return this.a + something;
}
var obj =
  a: 2
};

var bar = foo.bind(obj);
var b = bar(3); // 2 3
console.log(b); // 5

箭头函数比较特殊，它没有自己的this。

它使用封闭执行上下文(函数或是global)的 this 值：

var x=11;
var obj={
 x:22,
 say:() => {
   console.log(this.x);
 }
}

obj.say();// 11
obj.say.call({x:13}) // 11

x = 14
obj.say() // 14

//对比一下
var obj2={
 x:22,
 say() {
   console.log(this.x); //this指向obj2
 }
}
obj2.say();// 22
obj2.say.call({x:13}) // 13

结尾

以上我们系统的介绍了上下文， 以及与之相关的作用域， 闭包， this等相关概念。

介绍了他们的作用，使用场景以及区别和联系。

希望能对大家有所帮助， 文中若有纰漏， 欢迎指正, 谢谢。