完全邃晓作用域、实行上下文

2024年5月12日 95次阅读 来源: wens

好久没更新文章了，这一憋就是一个大的。
提及js中的观点，实行高低文和作用域应该是人人最轻易殽杂的，你说殽杂就殽杂吧，实在大多数人在开辟的时刻不是很关注这两个名词，然则这内里偏偏还混合很多其他的观点–变量提拔啊，闭包啊，this啊！
因而，搞邃晓这两者的关联对深切javascript至关主要

实行高低文

JavaScript代码的全部实行历程，分为两个阶段，代码编译阶段与代码实行阶段。编译阶段由编译器完成，将代码翻译成可实行代码，这个阶段作用域划定规矩会肯定。实行阶段由引擎完成，
主要任务是实行可实行代码，实行高低文在这个阶段竖立。

上面提到的可实行代码，那末什么是可实行代码呢？
实在很简朴，就三种，全局代码、函数代码、eval代码。
个中eval代码人人能够疏忽，毕竟现实开辟中处于机能斟酌基础不会用到，所以接下来我们重点关注的就是全局代码、函数代码

在巨大的代码里必定不会只要一两个函数，那末怎样治理每次实行函数时刻竖立的高低文呢

js引擎竖立了实行高低文栈（Execution context stack，ECS）来治理实行高低文

为了模仿实行高低文栈的行动，让我们定义实行高低文栈是一个数组：

ECStack = [];

试想当js最早要诠释实行代码的时刻，最早碰到的就是全局代码，所以初始化的时刻起首就会向实行高低文栈压入一个全局实行高低文，我们用 globalContext 示意它，而且只要当全部应用程序终了的时刻，ECStack 才会被清空，所以 ECStack 最底部永久有个 globalContext：

ECStack = [
    globalContext
];

举个?：

function out(){
    function inner(){}
    inner()
}
out()

那末这个函数的实行高低文栈会阅历以下历程：

ECStack.push(globalContext)
ECStack.push(outContext)
ECStack.push(innerContext)
ECStack.pop(innerContext)
ECStack.pop(outContext)
ECStack.pop(globalContext)

再来看一个闭包的?：

function f1(){
    var n=999;
    function f2(){
        console.log(n)
    }
    return f2;
}
var result=f1();
result(); // 999

该函数的实行高低文栈会阅历以下历程：

ECStack.push(globalContext)
ECStack.push(f1Context)
ECStack.pop(f1Context)
ECStack.push(resultContext)
ECStack.pop(resultContext)
ECStack.pop(globalContext)

人人自行感受一下对照，一定要记着高低文是在函数挪用的时刻才会临盆
既然挪用一个函数时一个新的实行高低文会被竖立。那实行高低文的生命周期一样能够分为两个阶段。

  • 竖立阶段
    在这个阶段中，实行高低文会离别竖立变量对象，竖立作用域链，以及肯定this的指向。
  • 代码实行阶段
    在这个阶段会天生三个主要的东西
    a.变量对象(Variable object，VO)
    b.作用域链(Scope chain)
    c.this

变量对象

在函数高低文中，我们用运动对象(activation object, AO)来示意变量对象。

运动对象实在就是被激活的变量对象，只是变量对象是范例上的或许说是引擎完成上的，不可在 JavaScript 环境中接见，只要到当进入一个实行高低文中，这个实行高低文的变量对象才会被激活，所以才叫 activation object，而只要运动对象上的种种属性才被接见。

实行高低文的代码会分红两个阶段举行处置惩罚：剖析（进入）和实行

  1. 进入实行高低文

当进入实行高低文时，这时刻还没有实行代码，

变量对象会包含：

  • 函数的一切形参 (假如是函数高低文)

    a.由称号和对应值组成的一个变量对象的属性被竖立
    b.没有实参，属性值设为 undefined

  • 函数声明

    a.由称号和对应值（函数对象(function-object)）组成一个变量对象的属性被竖立
    b.假如变量对象已存在雷同称号的属性，则完全替代这个属性

  • 变量声明

    a.由称号和对应值（undefined）组成一个变量对象的属性被竖立；
    b.假如变量称号跟已声明的形式参数或函数雷同，则变量声明不会滋扰已存在的这类属性

依据这个划定规矩，明白变量提拔就变得非常简朴了
举个?剖析下，看下面的代码：

function foo(a) {
  console.log(b)
  console.log(c)
  var b = 2;
  function c() {}
  var d = function() {};

  b = 3;

}

foo(1);

在进入实行高低文后，这时刻的 AO 是：

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: undefined,
    c: reference to function c(){},
    d: undefined
}
  1. 代码实行

在代码实行阶段，会递次实行代码，依据代码，修正变量对象的值

照样上面的例子，当代码实行完后，这时刻的 AO 是：

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}

因而，这个例子代码实行递次就是如许的

function foo(a) {
  var b
  function c() {}
  var d
  console.log(b)
  console.log(c)
  b = 2;
  function c() {}
  d = function() {};

  b = 3;

}

作用域

作用域划定了怎样查找变量，也就是肯定当前实行代码对变量的接见权限。
JavaScript 采纳词法作用域(lexical scoping)，也就是静态作用域。

由于 JavaScript 采纳的是词法作用域，函数的作用域在函数定义的时刻就决议了。
而与词法作用域相对的是动态作用域，函数的作用域是在函数挪用的时刻才决议的。

典范的一道面试题

var a = 1
function out(){
    var a = 2
    inner()
}
function inner(){
    console.log(a)
}
out()  //====>  1

作用域链

当查找变量的时刻，会先从当前高低文的变量对象中查找，假如没有找到，就会从父级(词法层面上的父级)实行高低文的变量对象中查找，一向找到全局高低文的变量对象，也就是全局对象。如许由多个实行高低文的变量对象组成的链表就叫做作用域链

下面，让我们以一个函数的竖立和激活两个时代来说解作用域链是怎样竖立和变化的。

上面讲到函数作用域是在竖立的阶段肯定
这是由于函数有一个内部属性 [[scope]]，当函数竖立的时刻，就会保留一切父变量对象到个中，你能够明白 [[scope]] 就是一切父变量对象的层级链，然则注重：[[scope]] 并不代表完全的作用域链！

举个?

function out() {
    function inner() {
        ...
    }
}

函数竖立时，各自的[[scope]]为：

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

inner.[[scope]] = [
    outContext.AO,
    globalContext.VO
];

当函数激活时，进入函数高低文，竖立 AO 后，就会将运动对象添加到作用链的前端。
这时刻实行高低文的作用域链，我们命名为 Scope：

Scope = [AO].concat([[Scope]]);

至此，作用域链竖立终了。

末了我们用一个代码完全的申明下全部历程

var scope = "global scope";
function checkscope(){
    var scope2 = 'local scope';
    return scope2;
}
checkscope();

实行历程以下：
1.checkscope 函数被竖立，保留作用域链到 内部属性[[scope]]

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

2.实行 checkscope 函数，竖立 checkscope 函数实行高低文，checkscope 函数实行高低文被压入实行高低文栈

ECStack = [
    checkscopeContext,
    globalContext
];

3.checkscope 函数并不马上实行，最早做准备事情，第一步：复制函数[[scope]]属性竖立作用域链

checkscopeContext = {
    Scope: checkscope.[[scope]],
}

4.第二步：用 arguments 竖立运动对象，随后初始化运动对象，到场形参、函数声明、变量声明

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    }，
    Scope: checkscope.[[scope]],
}

5.第三步：将运动对象压入 checkscope 作用域链顶端

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    Scope: [AO, [[Scope]]]
}

6.准备事情做完，最早实行函数，跟着函数的实行，修正 AO 的属性值

ECStack = [
    globalContext
];

至此，关于作用域和实行高低文的引见就到这里，愿望人人多消化，有题目请在批评中实时指出

    原文作者：wens
    原文地址: https://segmentfault.com/a/1190000013915935
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞