hgq's docs
主页
ES6-阮一峰 (opens new window)
Vue文档 (opens new window)
Axios文档 (opens new window)
Vue Router (opens new window)
Vuex文档 (opens new window)
面试题-Vue (opens new window)
面试题-JS (opens new window)

guoguoqiqi

漫不经心的向往
主页
ES6-阮一峰 (opens new window)
Vue文档 (opens new window)
Axios文档 (opens new window)
Vue Router (opens new window)
Vuex文档 (opens new window)
面试题-Vue (opens new window)
面试题-JS (opens new window)
  • JS数据类型
  • JS数据类型的转换
  • 判断数据类型的方法
  • null和undefined的区别
  • parseInt方法解析
  • promise简答
  • var和let以及const的区别
  • 本地存储的几种方式
  • 闭包是什么
  • 调用new的过程
  • 防抖和节流
  • 简单讲讲异步的理解
  • 简单讲讲原型和原型链
  • 判断变量的数据类型
  • 深浅拷贝
  • 数组去重的方法
  • 说一说JS中的this
  • 作用域和作用域链
  • JS的内置对象
  • JS继承的几种实现方式
  • 谈谈你对this、call、apply和bind的理解
  • 说一说原型、原型链
  • 什么是闭包,为什么使用闭包
    • JS中事件冒泡与捕获
    • 说一说JS的事件模型
    • 常用的遍历数组的方法
    • 如何创建一个Ajax
    • js 延迟加载的方式有哪些
    • 谈谈你对模块化开发的理解
    • js 的几种模块规范
    • ES6 模块与 CommonJS 模块、AMD、CMD 的差异
    • JS的运行机制、单线程、事件循环、宏任务微任务
    • arguments 的对象是什么
    • 简单介绍一下 V8 引擎的垃圾回收机制
    • 哪些操作会造成内存泄漏
    • ES6有哪些新特性
    • 说一说箭头函数
    • 什么是高阶函数
    • 为什么函数被称为一等公民
    • js的深浅拷贝
    • 函数柯里化
    • 说一说new操作符
    • 说一说对Promise的理解
    • Generator函数是什么,有什么作用
    • 说一说async和await
    • instanceof的原理是什么,如何实现
    • js 的节流与防抖
    • 相关面试题集合
    • 如何更好的处理async、await的异常
    • JS的事件委托
    • 浏览器和node中事件循环的区别
    • mouseover 和 mouseenter 的区别
    • ===与Object is的区别
    • 数组去重有哪些方法
    • 页面在浏览器中渲染出来的原理和流程
    • js和css是否会阻塞页面的渲染
    • Set、Map、WeakSet 和 WeakMap 的区别
    • 说一说Promise的实现原理
    • 说一说JS的事件循环
    • == 和 === 与隐式转化
    • 说一说回流(重排)和重绘
    • script标签中添加async或defer的作用与区别
    • 如何中断一个请求
    • 遍历一个对象身上属性的方法有哪些
    • 常用的数组方法(不改变原数组)
    • 常用的数组方法(改变原数组)
    • 常用字符串操作方法
    • 对象身上与原型相关的方法
    • 数组的reduce方法
    • 常用的位运算符有哪些
    • 浮点数运算有误差的问题
    • typeof和instanceof的区别
    • 有关js和css对页面渲染阻塞的问题
    • 说说对闭包的理解
    • DOMContentLoaded方法
    • es6中对象新增的方法
    • es6中数组新增的方法
    • es6中字符串新增的方法
    • es6新增的Reflect
    • 如何判断一个变量是否是数组
    • onload 和 DOMContentLoaded的区别
    • 大文件上传问题
    • 上传、下载和普通请求的区别
    • Javascript
    guoguoqiqi
    2022-02-21

    什么是闭包,为什么使用闭包

    image

    # 什么是闭包

    在 JS 忍者秘籍(P90)中对闭包的定义:闭包允许函数访问并操作函数外部的变量。

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

    MDN 对闭包的定义为:闭包是指那些能够访问自由变量的函数。这里的自由变量是外部函数作用域中的变量。

    第二种定义相对更好理解一些,闭包,本质就是上级作用域内变量的生命周期,因为被下级作用域内引用,而没有被释放。就导致上级作用域内的变量,等到下级作用域执行完以后才正常得到释放。

    # 形成闭包的原因

    原因

    内部的函数存在外部作用域的引用就会导致闭包。

    解释闭包是怎么形成的,或是对闭包的理解,可以从执行上下文、执行栈、作用域链来切入:

    常见的两种闭包形式: 一种是在一个函数A中又声明了一个函数B,然后还是在函数A中直接调用了函数B。另一个种是函数A返回了一个函数B,最终调用B的位置是在函数A外面。

    第一种:

    var scope = "global scope";
    function checkscope(){
        var scope = "local scope";
        function f(){
            debugger
            var name = 'mine'
            return scope;
        }
        return f();
    }
    checkscope();
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    image

    可以明显的看到,函数f的作用域(也就是f可访问到的变量)包括 自身中定义的变量、函数checkscope中的变量、全局变量。其中Closure就是对函数checkscope作用域的一种引用,也就是闭包。

    第二种:

    var scope = "global scope";
    
    function checkscope(){
        var scope = "local scope";
      
        function f(){
            var name = 'mine'
            debugger
            return scope;
        }
        return f;
    }
    checkscope()();
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    image

    对比以下,发现这两种情况,函数f的作用域一模一样。

    区别在于,这两种情况下,函数f执行的时候,整个程序的执行栈不同,第二种情况,函数f执行的时候,函数checkscope已经执行完了,已经从执行栈中退出并且被销毁了,但是由于函数f还保留着对函数checkscope中变量的引用(闭包的存在),所以checkscope中的变量并没有被销毁,函数f还是可以访问到定义在checkscope中的变量。

    # 参考文章链接

    JS 闭包经典使用场景和含闭包必刷题 (opens new window)
    我从来不理解JavaScript闭包,直到有人这样向我解释它 (opens new window)
    JS-原生/一个例子讲清楚什么是闭包,什么是内存销毁 (opens new window)
    从JS堆栈内存和垃圾回收来理解闭包 (opens new window)

    ← 说一说原型、原型链 JS中事件冒泡与捕获→

    最近更新
    01
    vuex数据持久化怎么做
    05-22
    02
    vue的动态路由怎么配置使用
    05-22
    03
    vue权限控制一般怎么做
    05-22
    更多文章>
    Theme by Vdoing | Copyright © 2022-2022 Guoquoqiqi | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式