1.从闭包说起

什么是闭包

一个函数和对其周围状态(词法环境)的引用捆绑在一起,这样的组合就是闭包。

也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。

在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。

上面是MDN对闭包的解释,这几句话可能不太好懂,没关系,我们先来看下能懂的:

  • 闭包是和函数有关
  • 这个函数可以访问它外层函数的作用域
  • 从定义看,每个函数都可以称为闭包

虽然从定义来看,所有函数都可以称为闭包,但是当我们在讨论它的时候,一般是指这种情况:

    //code-01
function cat() {
var name = "小猫";
function say() {
console.log(`my name is ${name}`);
}
return say;
}
var fun = cat();
//---cat函数已经执行完,下面却还能够访问到 say函数的内部变量 name
fun();
//> my name is 小猫

当一个函数的返回值是一个内部函数时(cat函数返回say函数),在这个函数已经执行完毕后,这个返回的内部函数还可以访问到已经执行完毕的函数的内部变量,就像 code-01中fun可以访问到cat函数的name,一般我们谈论的闭包就是指这种情况。

那么这是什么原因呢?这就涉及到函数的作用域链执行上下文的概念了,我们下面分别来说。

2.执行上下文

定义

什么是执行上下(Execution context )呢?简单来说就是全局代码或函数代码执行的时候的环境,它包含三个部分内容:

  • 1.变量对象(Variable object,vo),
  • 2.作用域链(Scope chain,sc)
  • 3.this的指向(这篇先不谈)

我们用一个对象来表示:

  EC = {
vo:{},
sc:[],
this
}

然后代码或函数需要什么变量的时候,就会在这里面找。

创建时间

执行上下文(EC)是什么时候创建的呢?这里分为两种情况:

  • 全局代码:代码开始执行,但是还没有执行具体代码之前
  • 函数代码:函数要执行的时候,但是还没值执行具体代码之前

其实如果把全局的代码理解为一个大的函数,这两者就可以统一了。

每一个函数都会创建自己的执行上下文,他们以栈的形式存储在一起,当函数执行完毕,则把它自己的执行上下文出栈,这就叫执行上下文栈(Execution context stack,ECS)

下面我们通过一段代码实例来看一下

声明语句与变量提升

具体分析之前,我们先来说声明语句,什么是声明语句呢?

  • 声明语句是用来声明一个变量,函数,类的语句
  • 比如:var,let,const,function,class
  • 其中 var 和 function 会造成变量提升,其他不会,如果var和function同名的话,则函数声明优先

    那什么是变量提升呢?
    // code-02
console.log(varVal); // 输出undefined
console.log(fun); // 输出 fun(){console.log('我是函数体') },
//console.log(letVal) //报错 letVal is not defined var varVal = "var 声明的变量";
let letVal = "let 声明的变量"; function fun() {
console.log("我是函数体");
}
var fun = "function"; //与函数同名,函数优先,但是可以重新赋值 console.log(varVal); // >> "var 声明的变量"
console.log(letVal); // >> "let 声明的变量"
//fun(); // 报错,因为fun被赋值为'function'字符串了 var name = "xiaoming";

在js执行代码的时候,会先扫一遍代码,把var,function的声明先执行,var声明的变量会先赋值为undefined,function声明的函数会直接就是函数体,这就叫变量提升,而其他的声明,比如let,则不会。

所以在变量赋值之前,console.log(varVal),console.log(fun)可以执行,而console.log(letVal)则会报错。

其中fun被重新声明为'function'字符串,但是在变量提升的时候,函数优先,所以console.log(fun)打印出来的是函数体,而代码执行赋值语句的时候,fun被赋值成了字符串,所以fun()会报错

代码执行过程分析--变量对象

我们先上一段简单的代码,通过这段代码,来分析一下 执行上下文创建和作用的过程,对其内容我们先只涉及变量对象vo:

//code-03
var name = 'xiaoming' function user(name){
var age = 27
console.log(`我叫${name},今年${age}`)
}
user(name)
console.log(name)

我们现在来分析一下这段代码执行过程中,执行上下文的作用过程,会加入变量对象vo,作用域链scope会在下面讲,this的指向这次不讲,所以就不加上去了

1.代码执行之前,先创建 全局的执行上下文G_EC,并压入执行上下栈ECS

ECS = [
G_EC : {
vo:{
name:undefined,
user(name){
var age = 27
console.log(`我叫${name},今年${age}`)
},
},
sc
}
]

2.代码开始执行,name被赋值,执行user(name)

3.函数执行的时候,具体代码还没执行之前,创建函数执行上下文user_EC,并压入ECS

ECS = [
user_EC : {
vo:{
name:undefined,
age:undefined,
},
sc
},
G_EC : {
vo:{
name:'xiaoming',
user(name){
var age = 27
console.log(`我叫${name},今年${age}`)
}
},
sc
}
]

4.开始执行函数代码,给形参name赋值,变量age赋值,执行console.log的时候需要变量nameage,于是从它自己的执行上下文user_EC中的变量对象vo里开始查找

ECS = [
user_EC : {
vo:{
name:'xiaoming',
age:27,
},
sc
},
G_EC : {
vo:{
name:'xiaoming',
user(name){
var age = 27
console.log(`我叫${name},今年${age}`)
}
},
sc
}
]

5.发现找到了,于是打印 我叫xiaoming,今年27,至此函数user执行完毕了,于是把其对应的执行上下文user_EC出栈

ECS = [
G_EC : {
vo:{
name:'xiaoming',
user(name){
var age = 27
console.log(`我叫${name},今年${age}`)
}
},
sc
}
]

6.代码继续执行,console.log(name),发现需要变量那么,于是从它自己的执行上下文中的变量对象开始查找,也就是G_EC中的vo,顺利找到,于是打印"xiaoming"

7.至此代码执行结束,但全局的执行上下文好像要等到当前页面关闭才出栈(浏览器环境)

3.作用域链

上面我们分析代码执行过程的时候,有说到如果要用到变量的时候,就从当前执行上下文中的变量对象vo里查找,我们刚好是都有找到。

那么如果当前执行上下文中的变量对象中没有需要用的变量呢?根据我们的经验,它会从父级的作用域来查找,那么这是根据什么来查找的呢?

所有接下来我们继续来看 '作用域链'(scope chain,sc),它也是执行上下文得另一个组成部分。

** 函数作用域 **

在说执行上下中的作用域链之前,我们要先来看看函数作用域,那么这是个什么东西呢?

  • 每一个函数都有一个内部属性【scope】
  • 它是函数创建的时候构建的
  • 它是一个列表,会把函数的所有父辈的执行上下中的变量对象存在其中

    举个例子:
//code-04
function fun_1(){
function fun_2(){}
}

1.我们看上面的代码,当fun_1函数创建的时候,它的父级执行上下文是全局执行上下文 G_EC,所以fun_1的函数作用域【scope】为:

fun_1.scope = [
G_EC.vo
]

2.当fun_2函数创建的时候,它的所有父级执行上下文有两个,一个是全局执行上下文 G_EC, 还有一个是函数fun_1的执行上下文 fun_1_EC, 所以fun_2的函数作用域【scope】为:

fun_1.scope = [
fun_1_EC.vo,
G_EC.vo
]

执行上下文的作用域链

上面我们说的是函数作用域,它包含了所有父级执行上下的变量对象,但是我们发现它没有包含函数自己的变量对象,因为这个时候函数只是声明了,还没有执行,而函数的执行上下文是在函数执行的时候创建的。

当函数执行的时候,会创建函数的执行上下文,从上面我们知道,这个时候会创建执行上下文变量对象vo,而赋值执行上下文作用域链sc的时候,会把vo加在scope前面,作为一个队列,赋值给作用域链

就是说:EC.sc = [EC.vo,...fun.scope],我们下面举例说明,这段代码与code-03的区别只是不给函数传参,所以会用到父级作用域的变量。

//code-05
var name = 'xiaoming' function user(){
var age = 27
console.log(`我叫${name},今年${age}`)
}
user()
console.log(name)

1.代码执行之前,先创建 全局的执行上下文G_EC,并压入执行上下栈ECS,同时赋值变量对象vo、作用域链sc,注意:当函数user被声明的时候,会带有函数作用域user.scope

ECS = [
G_EC : {
vo:{
name:undefined,
user // user.scope:[G_EC.vo]
},
sc:[G_EC.vo]
}
]

2.代码开始执行,name被赋值,执行user()

3.函数执行的时候,具体代码还没执行之前,创建函数执行上下文user_EC,并压入ECS,同时赋值变量对象vo和作用域链sc:

ECS = [
user_EC : {
vo:{
age:undefined,
},
sc:[user_EC.vo, ...user.scope]
},
G_EC : {
vo:{
name:'xiaoming',
user // user.scope:[G_EC.vo]
},
sc:[G_EC.vo]
}
]

4.开始执行函数代码,给变量age赋值,执行console.log的时候需要变量nameage,这里我们上面说是从变量对象里找,这里更正一下,其实是从作用域链中查找

ECS = [
user_EC : {
vo:{
age:27,
},
sc:[user_EC.vo, ...user.scope]
},
G_EC : {
vo:{
name:'xiaoming',
user, // user.scope:[G_EC.vo]
},
sc:[G_EC.vo]
}
]

5.我们发现在作用域链的第一个对象中(user_EC.vo)找到了age,但是没有name,于是开始查找作用域链的第二个对象,依次往下找,如果都没找到,则会报错。

这里的话,我们发现作用域链的第二个元素user.scope析构出来的,也就是G_EC.vo,这个里面有找到name='xiaoming'

于是打印 我叫xiaoming,今年27,至此函数user执行完毕了,于是把其对应的执行上下文user_EC出栈

ECS = [
G_EC : {
vo:{
name:'xiaoming',
user, // user.scope:[G_EC.vo]
},
sc:[G_EC.vo]
}
]

6.代码继续执行,console.log(name),发现需要变量那么,于是从它自己的执行上下文中的作用域链开始查找,在第一个元素G_EC.vo就顺利找到,于是打印"xiaoming"

7.至此代码执行结束,

4.回归到闭包的问题

到此为止我们介绍完了执行上下文,那么现在我们回归到刚开始的闭包为什么能访问到已经执行完毕了的函数的内部变量问题。我们再来回顾一下代码:

    //code-06
function cat() {
var name = "小猫";
function say() {
console.log(`my name is ${name}`);
}
return say;
}
var fun = cat();
fun();

我们来照上面的步骤来分析下代码:

1.代码执行之前,先创建 全局的执行上下文G_EC,并压入执行上下栈ECS,同时赋值变量对象vo、作用域链sc

ECS = [
G_EC : {
vo:{
fun:undefined,
cat, // cat.scope:[G_EC.vo]
},
sc:[G_EC.vo]
}
]

2.代码开始执行,执行cat()函数

3.函数执行的时候,具体代码还没执行之前,创建函数执行上下文cat_EC,并压入ECS,同时赋值变量对象vo和作用域链sc:

ECS = [
cat_EC : {
vo:{
name:undefined,
say, // say.scope:[cat_EC.vo,G_EC.vo]
},
sc:[cat_EC.vo, ...cat.scope]
},
G_EC : {
vo:{
fun:undefined,
cat, // cat.scope:[G_EC.vo]
},
sc:[G_EC.vo]
}
]

4.开始执行函数代码,给变量name赋值,然后返回say函数,这个时候函数执行完毕,它的值被付给变量fun,它的执行上下文出栈

ECS = [
G_EC : {
vo:{
fun:say, // say.scope:[cat_EC.vo,G_EC.vo]
cat // cat.scope:[G_EC.vo]
},
sc:[G_EC.vo]
}
]

5.代码继续执行,到了fun(),

6.当函数要执行,还没执行具体代码之前,创建函数执行上下文fun_EC,并压入ECS,同时赋值变量对象vo和作用域链sc:

ECS = [
fun_EC : {
vo:{},
sc:[fun_EC.vo, ...fun.scope]//fun==cat,所以fun.scope = say.scope = [cat_EC.vo,G_EC.vo]
},
G_EC : {
vo:{
fun:say, // say.scope:[cat_EC.vo,G_EC.vo]
cat // cat.scope:[G_EC.vo]
},
sc:[G_EC.vo]
}
]

7.函数fun开始执行具体代码:console.log(my name is ${name}),发现需要变量name,于是从他的fun_EC.sc中开始查找,第一个fun_EC.vo没有,于是找第二个cat_EC.vo,发现这里有name="小猫",

于是打印 my name is 小猫,至此函数fun执行完毕了,于是把其对应的执行上下文fun_EC出栈

ECS = [
G_EC : {
vo:{
fun:say, // say.scope:[cat_EC.vo,G_EC.vo]
cat // cat.scope:[G_EC.vo]
},
sc:[G_EC.vo]
}
]

8.至此代码执行结束

到这里我们知道闭包为什么可以访问到已经执行完毕的函数的内部变量,是因为在的执行上下文中的作用域链中保存了变量的引用,而保存的引用的变量不会被垃圾回收机制所销毁。

闭包的优缺点

优点:

  1. 可以创建拥有私有变量的函数,使函数具有封装性
  2. 避免全局变量污染

缺点:

  1. 增大内存消耗

参考

1.JavaScript深入之词法作用域和动态作用域

2.JavaScript深入之执行上下文栈

3.setTimeout和setImmediate到底谁先执行,本文让你彻底理解Event Loop

【机制】js的闭包、执行上下文、作用域链的更多相关文章

  1. js深入(三)作用域链与闭包

    在之前我们根绝对象的原型说过了js的原型链,那么同样的js 万物皆对象,函数也同样存在这么一个链式的关系,就是函数的作用域链 作用域链 首先先来回顾一下之前讲到的原型链的寻找机制,就是实例会先从本身开 ...

  2. 进阶学习js中的执行上下文

    在js中的执行上下文,菜鸟入门基础 这篇文章中我们简单的讲解了js中的上下文,今天我们就更进一步的讲解js中的执行上下文. 1.当遇到变量名和函数名相同的问题. var a = 10; functio ...

  3. 对JS闭包和函数作用域的问题的深入讨论,如何理解JS闭包和函数作用域链?

    首先先引用<JavaScript权威指南>里面的一句话来开始我的博客:函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的. 因此,就出现了如下的几串代码: ...

  4. 通俗易懂的来讲讲js的函数执行上下文

    0.开场白 在平时编写JavaScript代码时,我们并不会和执行上下文直接接触,但是想要彻底搞懂JavaScript函数的话,执行上下文是我们绕不过去的一个知识点. 1.执行上下文栈 JavaScr ...

  5. JS进阶之---执行上下文,变量对象,变量提升

    一.结构顺序大体介绍 JavaScript代码的整个执行过程,分为两个阶段,代码编译阶段与代码执行阶段. 编译阶段由编译器完成,将代码翻译成可执行代码,这个阶段作用域规则会确定. 执行阶段由引擎完成, ...

  6. js中的执行上下文,菜鸟入门基础。

    console.log(a); //Uncaught ReferenceError: a is not defined 因为没有定义a所以报错了. var a = 52; console.log(a) ...

  7. javascript --执行上下文,作用域

    执行上下文 顾名思意就知道他是动态的,只在代码运行的时候产生 作用域 顾名思意就知道它是一个"领域",并且这个"领域"在一开始就规划好, 不会在改, var d ...

  8. JS高阶---执行上下文栈

    大纲: 主体: 注意:*******函数调用时才会产生上下文栈,声明时不会产生********** 顺序: 概念图: 执行上下文栈的顺序---→后进先出 其他概念图: 当前执行的上下文总是在顶部 全局 ...

  9. JS高阶---执行上下文

    1.代码分类 2.全局执行上下文 3.函数执行上下文 .

  10. javascript 执行环境,变量对象,作用域链

    前言 这几天在看<javascript高级程序设计>,看到执行环境和作用域链的时候,就有些模糊了.书中还是讲的不够具体. 通过上网查资料,特来总结,以备回顾和修正. 要讲的依次为: EC( ...

随机推荐

  1. python之shutil 模块

    一.shutil 高级的 文件.文件夹.压缩包 处理模块 shutil.copyfileobj(fsrc, fdst[, length]) 将文件内容拷贝到另一个文件中 import shutil s ...

  2. .NET Core 中的日志与分布式链路追踪

    目录 .NET Core 中的日志与分布式链路追踪 .NET Core 中的日志 控制台输出 非侵入式日志 Microsoft.Extensions.Logging ILoggerFactory IL ...

  3. Docker-Docker部署SpringBoot项目

    1.手工方式 1.1.准备Springboot jar项目 将项目打包成jar 1.2.编写Dockerfile FROM java:8 VOLUME /tmp ADD elk-web-1.0-SNA ...

  4. virsh常见命令笔记

    [基本命令] virsh start 启动 shutdown 关闭 destroy 强制断电 suspend 挂起 resume 恢复 undefine 删除 dominfo 查看配置信息 domif ...

  5. 【MySQL 基础】MySQ LeetCode

    MySQL LeetCode 175. 组合两个表 题目描述 表1: Person +-------------+---------+ | 列名 | 类型 | +-------------+----- ...

  6. Java线程安全与锁优化,锁消除,锁粗化,锁升级

    线程安全的定义 来自<Java高并发实战>"当多个线程访问一个对象的时候,如果不用考虑这些线程在运行时环境下的调度和交替执行,也不需要进行额外的同步,或者在调用方法的时候进行任何 ...

  7. 我们NetCore下日志存储设计

    日志的分类 首先往大的来说,日志分2种 ①业务日志: 即业务系统需要查看的日志, 常见的比如谁什么时候修改了什么. ②参数日志: 一般是开发人员遇到问题的时候定位用的, 一般不需要再业务系统里展示. ...

  8. 【Samba】共享服务器的搭建和相关权限设置

    1.查看防护墙 [root@zhang~ ]# /etc/init.d/iptables status   iptables:Firewall is not running.   如果没有关闭的话将他 ...

  9. Python批量 png转ico

    Python 批量 png 转 ico 一.前言: 首先说一下ico文件的作用:ico是windows的图标文件格式,可以用于浏览器首段图标显示,也可以用于Windows软件.我的话一般用来美化文件夹 ...

  10. (数据科学学习手札104)Python+Dash快速web应用开发——回调交互篇(上)

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...