LEARN_前端进阶_作用域闭包

最新推荐文章于 2023-10-17 21:30:00 发布
最新推荐文章于 2023-10-17 21:30:00 发布
阅读量123 收藏
点赞数
原文链接：https://blog.csdn.net/lgno2/article/details/109446739
版权

深入浅出图解作用域闭包

红宝书上对闭包的定义：闭包是指有权访问另一个函数作用域中变量的函数。关键点在于：

  1. 是一个函数
  2. 能访问另一个函数作用域中的变量

对于闭包有下面有三个特性：

  • 闭包可以访问当前函数意外的变量

    function getOuter(){
  var date = '815';
  function getDate(str){
    console.log(str + date);  //访问外部的date
  }
  return getDate('今天是：'); //"今天是：815"
}
getOuter();

  • 即使外部函数已经返回，闭包仍能访问外部函数定义的变量

    function getOuter(){
  var date = '815';
  function getDate(str){
    console.log(str + date);  //访问外部的date
  }
  return getDate;     //外部函数返回
}
var today = getOuter();
today('今天是：');   //"今天是：815"
today('明天不是：');   //"明天不是：815"

  • 闭包可以更新外部变量的值

    function updateCount(){
  var count = 0;
  function getCount(val){
    count = val;
    console.log(count);
  }
  return getCount;     //外部函数返回
}
var count = updateCount();
count(815); //815
count(816); //816

作用域链

JavaScript 中有一个执行上下文（execution context）的概念，它定义了变量或函数有权访问其他的数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象，换金钟定义的所有变量和函数都保存在这个对象中。

作用域链： 当访问一个变量时，解释器会首先在当前作用域查看标识符，如果没有找到，就去父作用域找，直到找到该变量的标识符或者不在父作用域中，这就是作用域链。

作用域链和原型继承查找时的区别：如果去查找一个普通对象的属性，但是在当前对象和其原型中都找不到时，会返回 undefined；但查找的属性在作用域链中不存在的话就会抛出 ReferenceError。

作用域链的顶端是全局对象，在全局环境中定义的变量就会绑定到全局对象中。

全局环境

无嵌套的函数

// my_script.js
"use strict";

var foo = 1;
var bar = 2;

function myFunc() {
  
  var a = 1;
  var b = 2;
  var foo = 3;
  console.log("inside myFunc");
  
}

console.log("outside");
myFunc();

定义时： 当 myFunc 被定义的时候，myFunc 的标识符（identifier）就被加到了全局对象中，这个标识符所引用的是一个函数对象（myFunc function object）。

内部属性[[scope]] 只想当前的作用域对象，也就是函数的标识符被创建的时候，我们所能够直接访问的那个作用域对象（即全局对象）。

img

myFunc 所引用的函数对象，其本身不仅仅含有函数的代码，并且还含有指向其被创建的时候的作用域对象。

调用时： 当 myFunc 函数被调用时，一个新的作用域对象被创建了。新的作用域对象中包含 myFunc 函数所定义的本地变量，以及其参数（arguments）。这个新的作用域对象的父作用域对象就是在运行 myFunc 时能直接访问的那个作用域对象（即全局对象）。

img

有嵌套的函数

当函数返回没有被引用的时候，就会被垃圾回收器回收。但是对于闭包，即使外部函数返回了，函数对象仍会引用它被 创建时 的作用域对象。

"use strict";
function createCounter(initial) {
  var counter = initial;
  
  function increment(value) {
    counter += value;
  }
  
  function get() {
    return counter;
  }
  
  return {
    increment: increment,
    get: get
  };
}

var myCounter = createCounter(100);
console.log(myCounter.get());   // 返回 100

myCounter.increment(5);
console.log(myCounter.get());   // 返回 105

当调用 createCounter(100) 时，内嵌函数 increment 和 get 都有指向 createCounter(100) scope 的引用。假设 createCounter(100) 没有任何返回值，那么 createCounter(100) scope 不再被引用，于是就可以被垃圾回收。

img

但是 createCounter(100) 实际上是有返回值的，并且返回值被存储在了 myCounter 中，所以对象之间的引用关系如下图：

img

即使 createCounter(100) 已经返回，但是起作用域仍在，并且只能被内联函数访问。可以通过调用 myCounter.increment() 或 myCounter.get() 来直接访问 createCounter(100) 的作用域。

当 myCounter.increment() 或 myCounter.get() 被调用时，新的作用域对象会被创建，并且该作用域对象的父作用域对象会是当前可以直接访问的作用域对象。

调用 get() 时，当执行到 return counter 时，在 get() 所在的作用域并没有找到对应的标识符，就会沿着作用域链往上找，直到找到 counter ，然后返回该变量。

img

单独调用 increment(5) 时，参数 value 保存在当前的作用域对象。当函数要访问 counter 时，没有找到，于是沿着作用域链向上查找，在 createCounter(100) 的作用域找到了对应的标示符，increment() 就会修改 counter 的值。除此之外，没有其他方式来修改这个变量。闭包的强大也在于此，能够存贮私有数据。

img

创建两个函数：myCounter1和myCounter2

//my_script.js
"use strict";
function createCounter(initial) {
  /* ... see the code from previous example ... */
}

//-- create counter objects
var myCounter1 = createCounter(100);
var myCounter2 = createCounter(200);

img

myCounter1.increment 和 myCounter2.increment 的函数对象拥有着一样的代码以及一样的属性值（name，length等等），但是它们的 [[scope]] 指向的是不一样的作用域对象。

JavaScript 深入之从作用域链理解闭包

MDN 对闭包的定义：闭包是指那些能够访问自由变量的函数。

其中 自由变量，是指函数中使用的，但既不是函数参数 arguments 也不是函数的局部变量的变量，其实就是另外一个函数作用域中的变量。

function getOuter(){
  var date = '1127';
  function getDate(str){
    console.log(str + date);  //访问外部的date
  }
  return getDate('今天是：'); //"今天是：1127"
}
getOuter();

其中 date 既不是参数 arguments，也不是局部变量，所以 date 是自由变量。

分析

首先来一个简单的例子：

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

var foo = checkscope(); // foo指向函数f
foo();					// 调用函数f()

简要的执行过程如下：

  1. 进入全局代码，创建全局执行上下文，全局执行上下文 压入执行上下文栈
  2. 全局执行 上下文初始化
  3. 执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 执行上下文被压入执行上下文栈
  4. checkscope 执行 上下文初始化，创建变量对象、作用域链、this 等
  5. checkscope 函数执行完毕，checkscope 执行上下文从执行上下文栈中弹出
  6. 执行 f 函数，创建 f 函数执行上下文，f 执行上下文被压入执行上下文栈
  7. f 执行 上下文初始化，创建变量对象、作用域链、this 等
  8. f 函数执行完毕，f 函数上下文从执行上下文栈中弹出

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ldGQoAE1-1628042173811)(https://raw.githubusercontent.com/LaamGinghong/pics/master/img/20200812214835.png)]

函数 f 执行上下文维护了一个作用域链，会指向指向 checkscope 作用域，作用域链是一个数组，结构如下。

fContext = {
    Scope: [AO, checkscopeContext.AO, globalContext.VO],
}

所以指向关系是当前作用域 --> checkscope作用域–> 全局作用域，即使 checkscopeContext 被销毁了，但是 JavaScript 依然会让 checkscopeContext.AO（活动对象） 活在内存中，f 函数依然可以通过 f 函数的作用域链找到它，这就是闭包实现的 关键。

概念

上面介绍的是实践角度，其实闭包有很多种介绍，说法不一。

汤姆大叔翻译的关于闭包的文章中的定义，ECAMScript 中，闭包指的是：

  • 从理论角度：所有函数，因为他们在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就相当于是在访问自由变量，这个时候使用的是最外层的作用域。
  • 从实践角度：以下函数才算是闭包：
    • 即使创建它的上下文已经被销毁，它仍然存在（比如，内部函数从父函数中返回）
    • 在代码中引用了自由变量

面试必刷题

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]();

如果知道闭包的，答案就很明显了，都是3

循环结束后，全局执行上下文的VO是

globalContext = {
    VO: {
        data: [...],
        i: 3
    }
}

执行 data[0] 函数的时候，data[0] 函数的作用域链为：

data[0]Context = {
    Scope: [AO, globalContext.VO]
}

由于其自身没有i变量，就会向上查找，所有从全局上下文查找到i为3，data[1] 和 data[2] 是一样的。

解决办法

改成闭包，方法就是data[i]返回一个函数，并访问变量i

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = (function (i) {
      return function(){
          console.log(i);
      }
  })(i);
}

data[0]();	// 0
data[1]();	// 1
data[2]();	// 2

循环结束后的全局执行上下文没有变化。

执行 data[0] 函数的时候，data[0] 函数的作用域链发生了改变：

data[0]Context = {
    Scope: [AO, 匿名函数Context.AO, globalContext.VO]
}

匿名函数执行上下文的AO为：

匿名函数Context = {
    AO: {
        arguments: {
            0: 0,
            length: 1
        },
        i: 0
    }
}

因为闭包执行上下文中贮存了变量i，所以根据作用域链会在 globalContext.VO 中查找到变量 i,并输出0。

JavaScript 深入之闭包面试题解

作用域指的是一个变量和函数的作用范围，JS中函数内声明的所有变量在函数体内始终是可见的，在ES6前有全局作用域和局部作用域，但是没有块级作用域（catch只在其内部生效），局部变量的优先级高于全局变量。

作用域

变量提升

var scope = "global";
function scopeTest() {
    console.log(scope);
    var scope = "local"  
}
scopeTest(); //undefined

上面的代码输出是undefined，这是因为局部变量scope变量提升了，等效于下面

var scope = "global";
function scopeTest() {
    var scope;
    console.log(scope);
    scope = "local"  
}
scopeTest(); //undefined

注意，如果在局部作用域中忘记 var，那么变量就被声明为全局变量。

没有块级作用域

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();	// 3
data[1]();	// 3
data[2]();	// 3

作用域链

每个函数都有自己的执行上下文环境，当代码在这个环境中执行时，会创建变量对象的作用域链，作用域链是一个对象列表或对象链，它保证了变量对象的有序访问。

作用域链的开始是当前代码执行环境的变量对象，常被称之为“活跃对象”（AO），变量的查找会从第一个链的对象开始，如果对象中包含变量属性，那么就停止查找，如果没有就会继续向上级作用域链查找，直到找到全局对象中。

闭包

function createClosure(){
    var name = "jack";
    return {
        setStr:function(){
            name = "rose";
        },
        getStr:function(){
            return name + ":hello";
        }
    }
}
var builder = new createClosure();
builder.setStr();
console.log(builder.getStr()); //rose:hello

上面在函数中返回了两个闭包，这两个闭包都维持着对外部作用域的引用。闭包中会将外部函数的自由对象添加到自己的作用域链中，所以可以通过内部函数访问外部函数的属性，这也是javascript模拟私有变量的一种方式。

闭包面试题

由于作用域链机制的影响，闭包只能取得内部函数的最后一个值，这引起的一个副作用就是如果内部函数在一个循环中，那么变量的值始终为最后一个值。

这个代码已经贴过了，怕你们忘记，就再贴一遍

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();	// 3
data[1]();	// 3
data[2]();	// 3

如果要强制返回预期的结果，怎么办？？？

方法1：立即执行函数

for (var i = 0; i < 3; i++) {
    (function(num) {
        setTimeout(function() {
            console.log(num);
        }, 1000);
    })(i);
}
// 0
// 1
// 2

方法2：返回一个匿名函数赋值

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = (function (num) {
      return function(){
          console.log(num);
      }
  })(i);
}

data[0]();	// 0
data[1]();	// 1
data[2]();	// 2

无论是立即执行函数还是返回一个匿名函数赋值，原理上都是因为变量的按值传递，所以会将变量i的值复制给实参num，在匿名函数的内部又创建了一个用于访问num的匿名函数，这样每个函数都有了一个num的副本，互不影响了。

方法3：使用ES6中的let

var data = [];

for (let i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]();

解释下原理：

var data = [];// 创建一个数组data;

// 进入第一次循环
{ 
	let i = 0; // 注意：因为使用let使得for循环为块级作用域
	           // 此次 let i = 0 在这个块级作用域中，而不是在全局环境中
    data[0] = function() {
    	console.log(i);
	};
}

循环时，let声明i,所以整个块是块级作用域，那么data[0]这个函数就成了一个闭包。这里用｛｝表达并不符合语法，只是希望通过它来说明let存在时，这个for循环块是块级作用域，而不是全局作用域。

上面的块级作用域，就像函数作用域一样，函数执行完毕，其中的变量会被销毁，但是因为这个代码块中存在一个闭包，闭包的作用域链中引用着块级作用域，所以在闭包被调用之前，这个块级作用域内部的变量不会被销毁。

// 进入第二次循环
{ 
	let i = 1; // 因为 let i = 1 和上面的 let i = 0     
	           // 在不同的作用域中，所以不会相互影响
	data[1] = function(){
         console.log(i);
	}; 
}

当执行data[1]()时，进入下面的执行环境。

{ 
     let i = 1; 
     data[1] = function(){
          console.log(i);
     }; 
}

在上面这个执行环境中，它会首先寻找该执行环境中是否存在i，没有找到，就沿着作用域链继续向上到了其所在的块作用域执行环境，找到了i = 1,于是输出了1。

POWER!
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端基础系列(一): 作用域与闭包
王中博的博客
01-26 979
几个概念: 作用域：用于确定在何处以及如何查找变量（标识符）的一套规则。 词法作用域：词法作用域是定义在词法阶段的作用域。词法作用域是由写代码时将代码和块作用域写在哪里来决定的，因此当词法作用域处理代码是会保持作用域不变(大部分情况)。 块作用域：指的是变量和函数不仅可以属于所处的作用域，也可以属于某个代码块（通常用{}包裹）。常见的块级作用域有 with，try/catch，let，const 等。 函数作用域：属于这个函数的全部变量都可以在整个函数范围内使用及复用（包括嵌套作用域）。 作用域链：查找变
learn_[removed]练习JavaScript教程
03-09
8. **闭包**：理解闭包的概念，它是JavaScript中的一种高级特性，允许函数访问并操作外部作用域的变量，即使该函数在其外部作用域已被销毁。 9. **异步编程**：包括回调函数、Promise、async/await，这些都是处理...
learn:记录学习总结的一个小仓库，构建自己的前端知识体系
05-12
资源汇总 我的博客：、 个人学习笔记 学习冴羽博客中的 JavaScript 系列笔记 其他系列 前端知识体系 主线 2 万字 | 前端基础拾遗 90 问 前端硬核面试专题 前端知识清单【自检】 - ConardLi 的 blog 前端面试之道 - 宋小菜，助你建立起完整的前端知识架构体系，探究知识的原理，深入了解大厂常考知识点 JavaScript 深入系列、JavaScript 专题系列、ES6 系列、React 系列 - 冴羽的博客 高级前端进阶博文 - 木易杨前端进阶 副本 揭秘一线互联网企业 前端 JavaScript 高级面试 - 双越，BAT 工程师讲解前端 JS 高级面试考点：虚拟 DOM、Vue、React、Hybrid 实现原理，付费视频 Web 前端面试指南与高频考题解析 我的掘金面试收藏集 JavaScript JavaScript 深入浅出 - 视频，多看多理解，
项目前端技术-learn
weixin_30709061的博客
05-30 144
赶鸭子上架 之 前端学习 目前项目中的前端用到的技术主要是：1. bootstrap框架; 2. 基于javscript的jQuery, jQuery ui; 3. dust前端模板引型。 转载于:https://www.cnblogs.com/hello-yz/p/4540930.html...
LEARN_前端进阶_调用堆栈
qq_36550828的博客
08-04 384
理解 JavaScript 中的执行上下文和执行栈 执行上下文是当前 JavaScript 代码被解析和执行时所在环境的抽象概念 执行上下文的类型 执行上下文总共有三种类型 全局执行上下文：只有一个，浏览器的全局对象就是 window 对象，this 指向这个全局对象； 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文； eval 函数执行上下文：指的是运行在 eval 函数中的代码，很少用且不建议使用。 执行栈 执行栈，也叫调用栈，具有先进后出结构，
JavaScript闭包（作用域和作用域链）
w_minx的博客
10-14 141
JavaScript 的作用域是 通过函数来形成，也就是说一个函数内定义的变量，函数外是不可以访问。让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。 ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域。ES6 的到来，为我们提供了‘块级作用域’,可通过新增命令 let 和 const 来体现。 function fn() { var a = 'miya'; console.log(a); // 输出"miya"..
FE-learn:前端学习库
03-09
5. **作用域与闭包**：学习变量的作用域规则，理解全局和局部作用域，以及闭包的概念及其应用。 6. **原型与继承**：了解JavaScript的原型链机制，原型对象的创建和使用，以及如何实现类继承。 7. **异步编程**：...
pls-learn-manglemire:测试
04-01
作用域决定了变量的可见性和生命周期，而闭包则允许函数访问并操作其外部作用域的变量，即使在其定义的作用域之外。 事件处理是JavaScript的核心特性之一，它使得网页能够响应用户的操作，如点击按钮、滚动页面等。...
learn.javascript.ru
03-18
闭包是JavaScript中的重要特性，它可以访问并操作外部作用域的变量。 3. **对象与原型**：JavaScript的万物皆对象，每个对象都有一个内部属性[[Prototype]]，通常通过`__proto__`或`Object.getPrototypeOf`访问。...
learn:我的历史学习
04-11
2. **闭包**：深入学习闭包的概念，了解其在内存管理、作用域以及模块化中的应用。 3. **异步编程**：熟悉回调函数、Promise、async/await等处理异步操作的方式，提升代码的可读性和可维护性。 4. **ES6及更高版本...
LEARN_前端进阶_this全面解析
qq_36550828的博客
08-04 71
JavaScript 深入之史上最全 – 5种 this 绑定全面解析 this 绑定规则总共有下面 5 种： 默认绑定（严格/非严格模式） 隐式绑定 显式绑定 new 绑定 箭头函数绑定 调用位置 调用位置就是函数在代码中 被调用的位置（不是声明的位置）。 查找方法： 分析调用栈：调用位置就是当前正在执行的函数的 前一个调用中 使用开发工具得到调用栈：设置断点或者插入 debugger; 语句，运行时调试器会在那个位置暂停，同时展示当前位置的函数调用列表，这就是 调用栈。找到栈中 第二个元素，这就是
LEARN_前端进阶_深浅拷贝原理
qq_36550828的博客
08-04 133
详细解析赋值、浅拷贝和深拷贝的区别 赋值（Copy） 赋值是将某一数组或对象赋给某个变量的过程，分类下面 2 部分： 基本数据类型：赋值，赋值之后两个变量互不影响 引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响 对基本类型进行赋值操作，两个变量互不影响。 // 木易杨 let a = "muyiy"; let b = a; console.log(b); // muyiy a = "change"; console.log(a); // change console.log
learn-前端代码编写边界感
2301_76671906的博客
10-17 66
在编写页面的时候，并不仅仅是编写页面，应该带入实际场景思考，在可视区域范围内内容过多，数量过多应该如何展示。在初始构建页面布局的时候就应该考虑到。（4）.在编写页面的时候要考虑到边界溢出问题，拥有一定的边界感思维，写需求的时候充分考虑到内容过多的处理，对于表单，弹框等编写的时候需要特别注意。文字过多后下挤，换行。在首次编写的时候没有考虑到内容过多的时候的处理，tooltip提示结合使用。滚动条 ，内容裁剪 结合min-(h/w)文本内容过长的时候使用，内容裁剪，
边学边总结的前端笔记（JavaScript基础篇）
segegefe的博客
03-10 1066
「学习笔记」JavaScript基础 前言 最近一直研究JavaScript内容，遂把这一阶段的学习内容整理成笔记，巩固所学知识，同时也会参考一些博客，书籍上的内容，查漏补缺，给自己充充电??? 文章内容如有错误，欢迎指正批评 工欲善其事，必先利其器，为了提高开发效率，选用VScode。 管理-设置-常用设置-字体Consolas, ‘微软雅黑 Light’, monospace Chinese汉化Vscode Prettier格式化代码(缩进2格) Auto Rename Tag同步修
现代前端工程化-基于 Monorepo 的 lerna 模块(从原理到实战)
frontend_frank的博客
03-31 1370
本文你能学到什么？ 看完本文后希望可以检查一下图中的内容是否都掌握了，文中的例子最好实际操作一下，下面开始正文。本文是前端工程化系列中的一篇，回不断更新，下篇更新内容可看文末的下期预告！宗...
闭包——内部函数能访问外部函数得实际变量（而无须复制）
weixin_39214481的博客
01-02 2743
模块模式利用了函数作用域和闭包来创建被绑定对象与私有成员变量的关联，只有特权函数才能够访问特定的私有成员变量（数据对象）。 模块模式（摈弃全局变量的使用，封装程序）的一般形式是： 一个定义了私有变量和函数的函数； 利用闭包创建可以访问私有变量和函数的特权函数； 最后返回这个特权函数，或者把它们保存到一个可以访问到的地方。   //糟糕得例子——预期点击一个节点时应输出节点的序号，但是这...
【进阶2-1期】深入浅出图解作用域链和闭包
weixin_34014277的博客
11-26 143
本期的主题是作用域闭包，本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计划，文末点击查看全部文章。 如果觉得本系列不错，欢迎点赞、评论、转发，您的支持就是我坚持的最大动力。 红宝书(p178)上对于闭包的定义：闭包是指有权访问另外一个函数作用域中的变量的函数 关键在于下面两点： 是一个函数 能访问另外一个函数作用域中的变量 对于闭包有下面三个特性： 1、闭包可以访问当前...
闭包的使用场景，使用闭包需要注意什么
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
04-09 647
闭包什么是闭包闭包很简单，就是能够访问另一个函数作用域变量的函数，更简单的说，闭包就是函数，只不过是声明在其它函数内部而已。例如：functiongetOuter(){ varco...
ASP外观专利图像检索平台(源代码+论文).rar
最新发布
07-21
ASP外观专利图像检索平台(源代码+论文)
探索JavaScript作用域与闭包的奥秘
JavaScript的作用域与闭包是编程中的关键概念，它们直接影响着代码的可读性、性能和维护性。在深入理解JavaScript之前，我们需要先了解什么是作用域，它是如何管理变量的生命周期和访问权限。 **第一章：作用域** ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值