js - 执行上下文和作用域以及闭包

首先,咱们通常被"执行上下文","执行上下文环境","上下文环境","执行上下文栈"这些名词搞混。那我们一一来揭秘这些名字的含义。

这一块一直比较晦涩难懂,还是需要仔细去斟酌斟酌。

什么是执行上下文(也叫做“执行上下文环境”,“上下文环境”)?

咱们还是先看代码。

console.log(a)  // undefined
var a = 100fn('bella')  // 'bella' 20
function fn(name) {age = 20console.log(name, age)var age
}console.log(b); // 这里报错
// Uncaught ReferenceError: b is not defined

第一个console输出 undefined,说明浏览器在执行console.log(a)的时候,已经知道a的存在的,但是不知道a的值。

第二个fn("bella")输出 "bella" 20,说明浏览器在执行的时候已经知道fn函数了,并且执行了

第三个console报错,b is noe defined。说明没有找到b

那么可以看出来,浏览器在执行之前做了一些准备工作。

那做了些什么准备工作:

  • 全局上下文环境: 变量定义,函数声明
  • 函数上下文环境(函数内部):变量定义,函数声明,this,arguments

下面这个例子很多地方都用来讲解执行上下文和上下文栈。

 1 // 这是一个压栈出栈的过程--执行上下文栈
 2 let a = 10; // 1、进入全局上下文环境
 3 let fn; 
 4 let bar = function(x) {
 5     let b = 5
 6     fn(x + b) // 3、进入fn函数上下文环境
 7 };
 8 fn = function(y) {
 9     let c = 5
10     console.log(y + c)
11 }
12 
13 bar(10) // 2、 进入bar函数上下文

 这里引出了执行上下文栈的概念,上下文栈就是压栈和出栈的过程

1.在代码执行之前,首先创建全局上下文环境

    // 全局上下文环境
    a: undefinedfn: undefinedbar: undefined,
this: window

2.然后执行代码,在代码执行到12之前,全局上下文中的变量在执行中被赋值

    // 全局上下文环境a: 10fn: functionbar: function,
this: window

然后执行13行代码,调用bar函数,会创建一个新的执行上下文环境。并将这个bar上下文环境压栈,并设置为活动状态

   // bar函数上下文环境
    b: undefinedx: 10arguments: [10]
this: window

3.然后执行到第6行代码,调用fn的时候,会创建一个新的执行上下文。并将这个fn上下文环境压栈,并设置为活动状态。

// fn函数上下文环境
c: undefined
y: 15
arguments: [15]
this: window

4.fn执行完毕后,调用fn函数生成的fn上下文环境出栈,销毁。然后bar出栈销毁。然后全局上下文出栈销毁

 

 

理解完了执行上下文,再看看this

相信都知道这句话,谁调用函数,this就指向谁。那么我们理解下this:

    var a = {name: 'A',fn: function() {console.log(this.name)}}a.fn() // this === a
    a.fn.call({name: 'B'}) // this === {name: 'B'}var fn1 = a.fnfn1() // this === window

this: this的值只有在执行的时候才能确认,定义的时候不能确认。因为this是执行上下文的一部分,而执行上下文需要再代码执行之前确定。

this执行会有不同,主要集中在这几个场景中:
  1. 作为构造函数执行,构造函数中
  2. 作为对象属性执行,上述代码中a.fn()
  3. 作为普通函数执行,上述代码中fn1()
  4. 用于call apply bind,上述代码中a.fn.call()

作用域


ES6之前没有块级作用域,除了全局作用域,函数会创建自己的作用域。
作用域在函数定义的时候已经确定了,不是在函数调用确定(区别于执行上下文环境,this是执行上下文环境中的)
作用域只是一个“地盘”,其中没有变量。变量是通过作用域对应的执行上下文环境中的变量对象来实现的。所以作用域是静态的,而执行上下文是动态的
有闭包存在的时候,一个作用域存在两个上下文环境也是有的。
也就是说,作用域只是用于划分你在这个作用域里面定义的变量的有效范围,出了这个范围就无效

作用域链

函数在定义的时候就确定了函数体内部自由变量的作用域
自由变量:比如a,在fn作用域使用,但是并没有在fn作用域定义。这就是自由变量
let a = 100
function fn() {let b = 20function bar() {console.log(a + b) // a是自由变量}return bar
}let x = fn(), b = 200
x()
那么自由变量是如何得到的?这就引出了作用域链
bar要取得a的值,就要在bar函数的作用域中取值,如果没有,就往上找,找到fn作用域内,也没有定义a,继续往上找,就找到全局作用域,找到就结束了。这就是作用域链
讲完这些,我们再通过一个例子来理解闭包
1 function F1() {
2     var a = 100
3     return function () {
4         console.log(a)
5     }
6 }
7 var f1 = F1()
8 var a = 200
9 f1()

 

自由变量将从作用域链中去寻找,但是 依据的是函数定义时的作用域链,而不是函数执行时,以上这个例子就是闭包。
怎么理解依据的是函数定义时的作用域链,而不是函数执行时这句话?
调用第9行之后
如果按照执行时,就输出的时200
但是作用域都是在定义时就生成了,所以f1回去再定义function的作用域去找,因此输出100.
理解闭包之后,我们就看看闭包的主要场景:
  • 函数作为返回值,上面的例子就是
  • 函数作为参数传递

 

转载于:https://www.cnblogs.com/thonrt/p/10333581.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/450021.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring之JDBCTemplate

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 一、Spring对不同的持久化支持: Spring为各种支持的持久化技术,都提供了简单操作的模板和回调 ORM持久化技术模…

从蚂蚁金服实践入手,带你深入了解 Service Mesh

本文整理自蚂蚁金服高级技术专家敖小剑在 QCon 上海 2018 上的演讲。我是来自蚂蚁金服中间件团队的敖小剑,目前是蚂蚁金服 Service Mesh 项目的 PD。我同时也是 Servicemesher 中国技术社区的创始人,是 Service Mesh 技术在国内最早的布道师。我今天给大…

线程组之间的JMeter传递变量

下面,我们将看看如何在线程组之间共享和传递变量。在开发高级JMeter脚本时,很可能您将拥有多个线程组。每个线程组将执行不同的请求。一个很好的例子是我们需要使用Bearer Tokens对用户进行身份验证。一个线程组执行身份验证并保存令牌。另一个线程组需要…

python第九天(9-33)

一:进程 进程概念 进程就是一个程序运行在一个数据集上的一次动态执行过程进程一般由程序,数据集,进程控制块组成进程控制块: 进程控制块用来记录进程的外部特征,描述进程的执行变化过程,系统可以利用它来控…

Python 数据类型--Bytes类型

一、Bytes类型 在Python3以后,字符串和bytes类型彻底分开了。字符串是以字符为单位进行处理的,bytes类型是以字节为单位处理的。 bytes数据类型在所有的操作和使用甚至内置方法上和字符串数据类型基本一样,也是不可变的序列对象。 bytes对象只…

文件结构

C语言文件名命名的规则 1、文件标识符分为两部分,即文件名前缀和后缀。文件名前缀的最前面要使用范围限定符——模块名(文件名)缩写。 2、采用小写字母命名文件,避免使用一些比较通俗的文件名,如:publi…

POJ 1187 陨石的秘密 (线性DP)

题意: 公元11380年,一颗巨大的陨石坠落在南极。于是,灾难降临了,地球上出现了一系列反常的现象。当人们焦急万分的时候,一支中国科学家组成的南极考察队赶到了出事地点。经过一番侦察,科学家们发现陨石上刻…

bzoj2561 最小生成树

题意:给你无向图,给定一条边,求至少在原图中删去多少边才能使它同时在某个最大生成树和某个最小生成树中。 解: 假装我们把边排序了,然后把所有边权小于给定边的边都加进去了。 那么我们要删的就是s到t的一个割。 最大…

robotframework基础学习(8)

变量的使用 在 Edit 标签页中主要分:加载外部文件、定义内部变量、定义元数据等三个部分。 (1):加载外部文件Add Library:加载测试库,主要是[PYTHON 目录]\Lib\site-packages 里的测试库 Add Resource&…

[蓝桥杯]ALGO-188.算法训练_P0504

Anagrams指的是具有如下特性的两个单词:在这两个单词当中,每一个英文字母(不区分大小写)所出现的次数都是相同的。例如,Unclear和Nuclear、Rimon和MinOR都是Anagrams。编写一个程序,输入两个单词&#xff0…

beta第二天

团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504陈顺兴 031602505张胜男 031602540廖钰萍 031602323雷光游 031602319吴志鸿 0316206341.昨天的困难 陈顺兴:无 廖钰萍:无 吴志鸿:没有 雷光游:无 郑西坤…

C语言符号

C语言运算符的优先级 一、运算符的优先级表 C 语言的符号众多,由这些符号又组合成了各种各样的运算符。既然是运算符就一定有其特定的优先级,下表就是C 语言运算符的优先级表: 注:同一优先级的运算符,运算次序由结合…

burp过期了,换一个

先从吾爱破解论坛下载工具:https://down.52pojie.cn/Tools/Network_Analyzer/Burp_Suite_Pro_v1.7.37_Loader_Keygen.zip 工具运行需要Java环境,请自行安装,此处不赘述。解压完后双击keygen 填一下License Text(随意),然后点击Run…

hbase 概念

在hbase里面有几个通俗的名称会经常出现 1)Hregion region 2)Hregionserver regionserver 3)Hmaster master 4)Hmamstore memstore 5)Hfile storeFile 1、什么是hbase? 1)它是基于稀疏的、…

beta冲刺第三天

团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504陈顺兴 031602505张胜男 031602540廖钰萍 031602323雷光游 031602319吴志鸿 0316206341.昨天的困难 陈顺兴:理解别人的代码 廖钰萍: 吴志鸿:无 雷光游: …

模块化

我那进了"模块化研究"小组.所以嘞.研究模块化以及如何让项目的模块化更加合理和高效是我们小组的主要目的.首先,在实行模块化之前,得先巩固模块化开发的理论基础,因为理论是实践的基础。只有这样,在过程中理论与实践相结合,才有可能达到最满意…

1566:基础练习 十六进制转八进制

题目地址&#xff1a;https://acmore.cc/problem/LOCAL/1566 1 #include <iostream>2 #include <string>3 4 using namespace std;5 6 string HexToBin(string s) //16进制转2进制7 {8 string str "";9 for (int i 0; i < s.size(); i) 10…

java命令--jmap命令使用(查找内存泄漏对象)

转自&#xff1a;https://www.cnblogs.com/kongzhongqijing/articles/3621163.html jdk安装后会自带一些小工具&#xff0c;jmap命令(Java Memory Map)是其中之一。主要用于打印指定Java进程(或核心文件、远程调试服务器)的共享对象内存映射或堆内存细节。 jmap命令可以获得运行…

tr069相关协议说明

截图自easycwmp官网&#xff1a;http://easycwmp.org/转载于:https://www.cnblogs.com/kiss-passion/p/10362029.html

Beta 冲刺(6/7)

队名 火箭少男100组长博客 林燊大哥作业博客 Beta 冲鸭鸭鸭&#xff01;成员冲刺阶段情况 林燊&#xff08;组长&#xff09; 过去两天完成了哪些任务 协调组内工作最终测试文稿编写展示GitHub当日代码/文档签入记录(组内共享)接下来的计划 协助开发组完成标签制作展示视频制作…