JavaScript高级用法——执行上下文&this，以及闭包原理（二）

已于 2023-05-11 09:02:59 修改
阅读量56 收藏
点赞数
分类专栏： 爪哇课堂笔记 文章标签： javascript 前端
于 2023-05-02 16:43:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43979866/article/details/130460465
版权

目标：

  • 掌握执行上下文的相关知识
  • 闭包的原理

知识点：

  • 执行上下文栈
  • 执行上下文的变量组成
    • VO、AO
    • 作用域链
    • this
  • 闭包的定义及原理

1、执行上下文

1.1、变量提升和函数提升

/* case1 */
var foo = function() {
    console.log('foo1')
}
foo() //输出foo1
var foo = function() {
    console.log('foo2')
}
foo() //输出foo2

/* case2 */
function foo() {
    console.log('foo1')
}
foo() //输出foo2
function foo() {
    console.log('foo2')
}
foo() //输出foo2

/* case3 */
console.log(add2(1,1)); //输出2
function add2(a,b){
    return a+b;
}
console.log(add1(1,1));  //报错：add1 is not a function
var add1 = function(a,b){
    return a+b;
}

通过以上3个代码实例，我们可以发现JavaScript中代码并不是一行一行的分析和执行，而是一段一段地分析执行。当执行一段代码的时候会进行一个“准备工作”。
JavaScript的可执行代码的类型就三种：全局代码、函数代码、eval代码，按这三种类型进行一段一段的拆分，而这里的“准备工作”就是执行上下文

代码中的var和function会进行变量提升和函数提升，但是有以下这些区别：

  • var
    var x = xxx会将var x对x变量的声明提升到代码开始的地方，而赋值操作x = xxx是执行到这一行时才执行
  • function
    function x() {}用函数语句创建的函数x()会把函数名和函数体都提升到最开始的地方。

所以上面的case2和case3相当于下面这段

/* case2 */
function foo() {
    console.log('foo1')
}
function foo() {
    console.log('foo2')
}
foo() // 输出foo2
foo() // 输出foo2

/* case3 */
function add2(a,b){
    return a+b;
}
var add1
console.log(add2(1,1)); // 输出2
console.log(add1(1,1));  // 此时add1是undefined，所以会报错：add1 is not a function
add1 = function(a,b){
    return a+b;
}

1.2、执行上下文栈

执行上下文是通过执行上下文栈(Execution context stack，ECS)来进行管理的，这里我们定义执行上下文栈为数组ECStack = []来模拟执行上下文栈的行为，遵循后进先出的原则，执行到对应的代码的时候进行上下文压栈，执行完之后进行出栈。

开始执行JavaScript代码的时候，最先遇到的就是全局代码，所以先向ECStack压入全局执行上下文，用globalContext表示，整个应用程序结束的时候，globalContext才会被推出。

来段简单的代码来举个例子：

function fun3() {
    console.log('fun3')
}

function fun2() {
    fun3();
}

function fun1() {
    fun2();
}

fun1();

先推入globalContext全局上下文，执行到fun1()这行代码的时候开始压栈，先是推入fun1Context，然后是fun2Context，最后是fun3Context，fun3执行完之后将fun3Context弹出，依次类推。这就是代码执行顺序，退出执行环境后推出globalContext

// fun1()
ECStack.push(<fun1> functionContext);

// fun1中调用了fun2，创建fun2的执行上下文
ECStack.push(<fun2> functionContext);

// fun2还调用了fun3
ECStack.push(<fun3> functionContext);

// fun3执行完毕
ECStack.pop();

// fun2执行完毕
ECStack.pop();

// fun1执行完毕
ECStack.pop();

在上一章节中提到的作用域面试真题的那两段代码的执行上下文是不一样的，在这里进行解析

// case 1
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();
// 解析：
ECStack.push(<checkscope> functionContext);
ECStack.push(<f> functionContext);
ECStack.pop();
ECStack.pop();

// case 2
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();
// 解析：
ECStack.push(<checkscope> functionContext);
ECStack.pop();
ECStack.push(<f> functionContext);
ECStack.pop();

1.3、执行上下文

当JavaScript执行一段可执行代码时，都会创建对应的执行上下文
在上面我们已经知道了执行上下文栈是维护执行上下文的，那么执行上下文中又有什么属性呢？
对于每个执行上下文都有三个重要的属性：

  • 变量对象 (Variable object，VO 或者 Activation object, AO)
  • 作用域链 (Scope Chain)
  • this

1.3.1、变量对象

变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。

全局上下文和函数上下文的变量对象的区别：

  • 全局上下文
    全局对象是预定义的对象，在JS中，全局对象就是Window对象，可以访问其他所有预定义的对象、函数和属性；
    在顶层JS代码中，可以用关键字this引用全局对象也就是window对象，且在这层代码中声明的所有变量都会成为全局对象的属性；
    全局对象有window属性指向自身，即this.window.b === this.b。
  • 函数上下文
    在函数上下文中，用活动对象(AO)来表示变量对象。AO其实就是VO，但是因为只有进入一个执行上下文中，这个执行上下文的变量对象才会被激活，所以才叫活动对象。
    而只有被激活的变量对象，也就是活动对象上的各种属性才能被访问。
    活动对象是在进入函数上下文时被创建的，它通过函数的argumens属性初始化。

执行上下文的代码会分成两个阶段进行处理：分析和执行

  • 分析 —— 进入执行上下文
    构造变量对象，它的值包括：
    • 函数的所有形参
    • 函数声明
    • 变量声明
    function foo(a) {
  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
}
  • 执行 —— 代码执行
    在这个阶段会顺序执行代码，根据代码修改变量对象的值，执行完成后，此时的AO为：
    AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}

以上就是变量对象的创建过程，总结：

  1. 全局上下文的变量对象初始化是全局对象；
  2. 函数上下文的变量对象初始化只包括 Arguments 对象；
  3. 在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值；
  4. 在代码执行阶段，会再次修改变量对象的属性值；

注：在进入执行上下文时，首先会处理函数声明，其次会处理变量声明，如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性。

1.3.2、作用域链

查找变量的时候，先从当前上下文的变量对象中查找，如果没有找到，就会从父级执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链

JS采用静态作用域，函数的作用域在函数定义的时候就决定了，原理如下：
函数有一个内部属性[[scope]]，当函数创建的时候就会保存所有父变量对象到其中，[[scope]]就是所有父变量对象的层级链，但是它并不代表完整的作用域链。

function foo() {
    function bar() {}
}

// 函数创建时各自的[[scope]]为：
foo.[[scope]] = [
  globalContext.VO
];

bar.[[scope]] = [
    fooContext.AO,
    globalContext.VO
];

当函数激活，进入函数上下文，创建变量对象后，就会将活动对象添加到作用域链的前端，这时候执行上下文的作用域链Scope为Scope = [AO].concat([[Scope]])。至此，作用域链创建完毕。

1.3.3、变量对象和作用域链创建过程总结

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

该段代码执行过程如下所示：

  1. checkscope函数被创建，保存作用域链到内部属性[[scope]]
    checkscope.[[scope]] = [
    globalContext.VO
];
  2. 进入函数，创建函数执行上下文并压入执行上下文栈
    ECStack = [
    checkscopeContext,
    globalContext
];
  3. 分析函数，复制[[scope]]属性创建作用域链
    checkscopeContext = {
    Scope: checkscope.[[scope]],
}
  4. 创建活动对象，初始化AO
    checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    }，
    Scope: checkscope.[[scope]],
}
  5. 将活动对象压入 checkscope 作用域链顶端
    checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    Scope: [AO, [[Scope]]]
}
  6. 执行函数，修改属性值
    checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: 'local scope'
    },
    Scope: [AO, [[Scope]]]
}
  7. 查找到scope2的值，返回后函数执行完毕，函数上下文从执行上下文栈中弹出
    ECStack = [
  globalContext
];

1.3.4、this

this是规范类型中的标准规范，this始终指向引用它的值

知道this原理前需要了解的概念：

  • Reference
    它们是为了更好地描述语言的底层行为逻辑才存在的，但并不存在于实际的 js 代码中，它由三部分组成：

    • base value
      只能是属性所在的对象或者EnvironmentRecord，就是string，number这些基本类型的值
    • referenced name
      属性名称
    • strict reference
      是否为严格模式，一般为false
    var foo = 1;

// foo对应的Reference是：
var fooReference = {
    base: EnvironmentRecord, //相当于1
    name: 'foo',
    strict: false
};

var foo = {
    bar: function () {
        return this;
    }
};
foo.bar();

// bar对应的Reference是：
var BarReference = {
    base: foo,
    propertyName: 'bar',
    strict: false
};

    还有GetBase 和 IsPropertyReference两个方法，作用分别是获取base value的值和判断base value是否为对象

  • MemberExpression
    官方的MemberExpression有以下几种：

    • PrimaryExpression —— 原始表达式
    • FunctionExpression —— 函数定义表达式
    • MemberExpression [ Expression ] —— 属性访问表达式
    • MemberExpression . IdentifierName —— 属性访问表达式
    • new MemberExpression Arguments —— 对象创建表达式
    function foo() {
    console.log(this)
}

foo(); // MemberExpression 是 foo

function foo() {
    return function() {
        console.log(this)
    }
}

foo()(); // MemberExpression 是 foo()

var foo = {
    bar: function () {
        return this;
    }
}

foo.bar(); // MemberExpression 是 foo.bar

    所以简单理解 MemberExpression 其实就是()左边的部分

如何确定this的值？

  1. 计算 MemberExpression 的结果赋值给 ref；
  2. 判断 ref 是不是一个 Reference 类型；
    • 如果 ref 是 Reference，并且 IsPropertyReference(ref) 是 true, 那么 this 的值为 GetBase(ref)
    • 如果 ref 是 Reference，并且 base value 值是 Environment Record, 那么this的值为 ImplicitThisValue(ref)
    • 如果 ref 不是 Reference，那么 this 的值为 undefined，此时this就指向了 window

概括一下就是：
判断最后一个括号左边的部分是不是Reference，如果不是，那this就是undefined，指向window；如果是，而且base value是对象，那this的值就是这个对象

var value = 1;

var foo = {
  value: 2,
  bar: function () {
    return this.value;
  }
}

//示例1
console.log(foo.bar()); //2
MemberExpression: foo.bar;
Reference: {
    base: foo,
    name: 'bar',
    strict: false
}
// foo.bar是方法，所以ref是Reference；方法是对象，IsPropertyReference(ref) 是true；
// 综上：this是foo

//示例2
console.log((foo.bar)()); //2
MemberExpression: (foo.bar);
Reference: {
    base: foo,
    name: 'bar',
    strict: false
}
// 与示例1同理

//示例3
console.log((foo.bar = foo.bar)()); //1
MemberExpression: (foo.bar = foo.bar);
// foo.bar = foo.bar是表达式，不是Reference，所以this是undefined

//示例4
console.log((false || foo.bar)()); //1
MemberExpression: (false || foo.bar);
// (false || foo.bar)不是Reference，所以this是undefined

//示例5
console.log((foo.bar, foo.bar)()); //1
MemberExpression: (foo.bar, foo.bar);
// (foo.bar, foo.bar)不是Reference，所以this是undefined

1.4、闭包

能够访问自由变量（在函数中使用，既不是函数的参数，也不是函数局部变量的变量）的函数称为闭包。

为什么会形成闭包呢？主要还是因为执行上下文中的作用域链，因为作用域链能够访问到上一级的活动变量。

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

var foo = checkscope();
foo();

再来解析一下这段代码的执行上下文的变化情况

  1. 进入全局代码，全局执行上下文压入执行上下文栈
    ECStack = [
	globalContext
]
  2. 全局执行上下文初始化
  3. 执行checkscope函数，创建函数执行上下文并压入执行上下文栈
    ECStack = [
	checkscopeContext
	globalContext
]
  4. checkscope执行上下文初始化，创建变量对象、作用域链、this等
  5. checkscope函数执行完毕，checkscope 执行上下文从执行上下文栈中弹出
    ECStack = [
	globalContext
]
  6. 执行 f 函数，创建函数执行上下文并压入执行上下文栈
    ECStack = [
	fContext
	globalContext
]
  7. f 执行上下文初始化，创建变量对象、作用域链、this等
    fContext = {
	AO: {...},
	Scope: [AO, checkscopeContext.AO, globalContext.VO]
}
  8. f 函数执行完毕，f 函数上下文从执行上下文栈中弹出

在第七步我们可以看到 f 函数的作用域链中存在checkscopeContext.AO，所以即使 checkscopeContext 被销毁了，但是 JavaScript 依然会让 checkscopeContext.AO 活在内存中，f 函数依然可以通过 f 函数的作用域链找到它，正是因为 JavaScript 做到了这一点，从而实现了闭包这个概念。

彪悍的战斗猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解javascript原型和闭包1
08-04
至此，我们讨论了JavaScript中一些核心的概念，包括对象、函数、原型、继承、执行上下文、作用域和闭包。理解这些概念对于深入掌握JavaScript至关重要。 （17）——补this `this`的绑定策略在JavaScript中比较复杂...
javaScript面试题大全共6页.pdf.zip
11-21
3. **原型与继承**：JavaScript使用原型链实现继承，了解Object.prototype、__proto__、prototype、构造函数、new关键字的工作原理，以及如何通过call、apply、bind方法改变this上下文。 4. **异步编程**：事件循环...
JS学习篇（二）——执行上下文，闭包，垃圾回收机制
weixin_43332220的博客
01-17 154
执行上下文 先来看一段代码： showname(); console.log(myname); var myname="Claire"; function showname(){ console.log("I am Claire") }; 这段代码的输出结果为 I am Claire undefined 那么，在学习JS的时候知道JS是按照顺序执行的，在执行第一句以及第二句的时候，函数showname（），和变量myname都没有被定义，按照之前的说法的话，那么这段代码在执行的过程会被报错，但
JavaScript中的执行上下文、作用域链和闭包详解
IT_10的博客
01-12 2337
执行环境 执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个函数都有自己的执行环境。执行环境中定义的变量或函数保存在变量对象中。 例如，在web浏览器中，全局执行环境被认为是windows对象，因此所有全局变量和函数都是作为 window 对象的属性和方法创建的，比如我们调用windows.load()方法。 某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的...
浏览器中的JavaScript执行机制（五）this：从JavaScript执行上下文视角讲this
weixin_44828588的博客
03-16 169
当函数作为对象的方法调用时，函数中的 this 就是该对象； 当函数被正常调用时，在严格模式下，this 值是 undefined，非严格模式下 this 指向的是全局对象 window； 嵌套函数中的 this 不会继承外层函数的 this 值。 最后，我们还提了一下箭头函数，因为箭头函数没有自己的执行上下文，所以箭头函数的 this 就是它外层函数的 this。 这是我们“JavaScript 执行机制”模块的最后一节了，五节下来，你应该已经发现我们将近一半的时间都是在谈 JavaScript 的各种
JavaScript——“上下文”
求职大学生
06-04 145
在JavaScript中，“上下文”（Context）通常指的是函数执行时的环境，它决定了函数中this的值。在JavaScript执行过程中，每当一个函数被调用，一个执行上下文就会被创建。执行上下文的概念对于理解作用域、作用域链、闭包、异步编程等JavaScript的核心机制非常重要。this。
javascript视频教程
07-14
6. **this关键字**：在JavaScript中，`this`关键字用于引用当前执行上下文的对象，它的值会根据函数调用的位置和方式而改变。 7. **闭包**：闭包是JavaScript中的一个重要特性，允许函数访问并操作其外部作用域的...
misc-js-work:其他JavaScript问题
05-19
理解this的关键在于掌握函数调用上下文。 4. prototype与继承： JavaScript使用原型链实现继承。每个对象都有一个proto属性（旧版浏览器中为__proto__），指向创建它的构造函数的prototype对象。通过原型，子类...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 763
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
更新商品前端接口编写
weixin_55639995的博客
07-12 419
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue解决页面放大图片模糊的问题
m0_56104994的博客
07-12 319
解决页面放大，图片模糊的问题
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 808
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
qq_37752382的博客
07-15 542
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
ReactRouter v6升级的步骤
feixin369的博客
07-14 403
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
高职软件技术实训室
最新发布
whwzzc的博客
07-17 741
当前，软件行业正处于高速发展阶段，对人才的需求呈现出多元化、高精尖的特点。平台基于k8s实现公有云、混合云、私有云多种部署方式，提供在线html、css、js、jquery、vue等前端开发环境，实现真正的云开发，开箱即用，主要模块有课程制作工具、作业、活动、云盘、共享课、我的课、云优选课。平台基于k8s实现公有云、混合云、私有云多种部署方式，提供在线java、python等后台语言，实现真正的云开发，开箱即用，主要模块有课程制作工具、作业、活动、云盘、共享课、我的课、云优选课。
商品详情使用富文本编辑器
m0_74356429的博客
07-13 167
2、因为好多页面都需要用到，封装富文本编辑器组件。3、在商品编辑和商品添加页面添加富文本编辑器。Editor.vue代码。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 295
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
前端面试必备：JavaScript执行上下文、作用域链与闭包解析
"面试资料整理.docx 是一份前端面试准备文档，涵盖了JavaScript基础，包括执行上下文、作用域链和闭包等核心概念，并提到了这些知识点在实际开发中的应用和使用场景。文档作者表示会持续更新和完善内容，旨在帮助...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值