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 技术在国内最早的布道师。我今天给大…

Android应用开发—FragmentManager如何管理fragments

本文主要摘录自Android中使用FragmentManager管理fragments 和 浅谈FragmentManager与fragment之一二事 先讲下自己对fragment的理解: 对于fragment,有太多官方文档和博文来介绍,此处不做转述:我感觉android提供fragment这种组件…

数组指针 和 指针数组

最近发现公司有些人说怎样区分 数组指针 和 指针数组 ? 其实 很简单; 数组指针, 先是(定语 ) (主体), (定语 数组) (主体 指针&#xff09…

在云服务器上注意GeoServer和ShadowDataMap的跨域设置

在云服务器上注意GeoServer和ShadowDataMap的跨域设置 1、对于支持cors的网络资源 可以在ShadowDataMap的devserverconfig.json里设置相应的跨域资源 提示:geoserver发布的地图服务虽然同在一个服务器上,但是端口不一样,同样需要设置跨域 如&…

Guava ImmutableCollection简介

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 ImmutableCollection代码定义 GwtCompatible(emulatedtrue) public abstract class ImmutableCollection<E> extends AbstractCo…

Todo List

fragment里面如何处理back按键事件。 fragment里面无法Override onBackPressed接口&#xff0c;如何优雅的处理back press事件&#xff1f;activity如何获取当前活跃的fragment对象。异步网络请求如何改造成rxjava&#xff0c;rxjava有设置运行线程的能力&#xff0c;异步请求…

常见的几种负载均衡算法

1、轮询将所有请求&#xff0c;依次分发到每台服务器上&#xff0c;适合服务器硬件相同的场景。优点&#xff1a;服务器请求数目相同&#xff1b; 缺点&#xff1a;服务器压力不一样&#xff0c;不适合服务器配置不同的情况&#xff1b; 2、随机请求随机分配到各台服务器上。优…

基于 Token 的身份验证方法

基于 Token 的身份验证方法 使用基于 Token 的身份验证方法&#xff0c;在服务端不需要存储用户的登录记录。大概的流程是这样的&#xff1a;客户端使用用户名跟密码请求登录 服务端收到请求&#xff0c;去验证用户名与密码 验证成功后&#xff0c;服务端会签发一个 Token&…

Android应用开发-图片加载库Glide

Glide Picasso和Glide之间的区别&#xff1a; Picasso 仅仅缓存了全尺寸的图像&#xff1b;然而 Glide 缓存了原始图像&#xff0c;全分辨率图像和另外小版本的图像。

excel 表格导入 - java 实现

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 import com.alibaba.druid.support.json.JSONUtils; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArray; imp…

C语言 API

MySQL的C语言API接口 1、首先当然是连接数据库&#xff0c;函数原型如下&#xff1a; MYSQL * STDCALL mysql_real_connect(MYSQL *mysql, const char *host, const char *user, const char *passwd, const char *db, unsigned int port, const char *unix_socket, unsigned…

线程组之间的JMeter传递变量

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

python第九天(9-33)

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

Android Studio出现Failed to open zip file. Gradle's dependency cache may be corrupt问题的解决

删除了/Users/tycao/.gradle/wrapper/dists目录下对应的gradle-X.X-all目录重新sync了

双机热备份和负载均衡的区别

1、双机热备相当于2台服务器其中有一台是另一台的备机&#xff0c;也可以互为备机&#xff1b;而且这两台主机的数据时实时同步的&#xff1b;主机在运行服务时&#xff0c;备机处于检测状态&#xff0c;主机发生故障后&#xff0c;备机将接管主机的服务。2、负载均衡是在这2台…

Python 数据类型--Bytes类型

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

Android应用开发-onNewIntent()

转载自Android中 activity 的onNewIntent函数

文件结构

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

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

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