闭包

闭包理解

如何产生闭包

  • 当一个嵌套的内部(子)函数引用了嵌套外部(父)函数的变量(函数)时--就产生了闭包

闭包是什么

  • 使用chrome调试查看

  • 理解一 -- 闭包是嵌套的内部函数

  • 理解二 -- 闭包是包含被引用变量(函数)的对象

  • 闭包存在于嵌套的内部函数中

  • 产生闭包的条件

  • 函数嵌套

  • 内部函数引用了外部函数的数据(变量或函数)

<script>
    function fn1() {
        var a = 3;
        function fn2() {
            console.log(a);
        }
        fn2();
    }
    fn1();
</script>

闭包

常见闭包

将函数作为另一个函数的返回值

function fn1() {
    var a = 2;
    function fn2() {
        a++;
        console.log(a);
    }
    return fn2;
}
var f = fn1();
f();    //3--fn1的返回值是fn2--相当于调用了fn2()--相当于fn1()()
f();    //4--闭包不会消失--第一次fn1()执行时--闭包内的数据是3--第二次执行时就是4

将函数作为实参传递给另一个函数调用

function showDelay(msg, time) {
    setTimeout(function () {
        console.log(msg);   //闭包
    }, time);
}
showDelay('zao', 2000);

闭包

闭包的作用

  • 使用函数内部的变量在函数执行完后--仍然存活在内存中--延长了局部变量的生命周期

  • 让函数外部可以操作(读写)到函数内部的数据--变量/函数

问题

  • 函数执行完--函数内部声明的局部变量是否还存在--一般不存在,存在于闭包中的变量才可能存在
  • 在函数外部能直接访问函数内部的局部变量吗--不能,但可以通过闭包让外部操作它

闭包的生命周期

  • 产生--在嵌套内部函数定义执行完时就产生了
  • 死亡--在嵌套内部函数成为垃圾对象时
function fn1(){
    // 闭包产生--函数提升--内部函数已经创建了
    var a = 2;
    function fn2(){
        a++;
        console.log(a);
    }
    return fn2;
}
//只要有变量引用fn1()闭包就一直存在
var f = fn1();
f();
f();
//闭包死亡--包含闭包的函数成为垃圾对象
f = null;

闭包的应用

定义JS模块

  • 具有特定功能的js文件
  • 将所有数据和功能都封装在一个函数内部--私有
  • 只向外暴露一个包含n个方法的对象或函数
  • 模块的使用者--只需通过模块暴露的对象调用方法来实现对应的功能
//JS文件
function myMoudle() {
    var msg = 'zaoya';
    function doSomething() {
        //toUpperCase--字符串转换为大写
        console.log('doSomething()' + msg.toUpperCase());
    }
    function doOtherthing() {
        //toLowerCase--字符串转换为小写
        console.log('doOtherthing()' + msg.toLowerCase());
    }
    //向外暴露对象
    return {
        doSomething: doSomething,
        doOtherthing: doOtherthing
    }
}

//html文件
<script src="myMoudle.js"></script>
<script>
    let fn = myMoudle();
	fn.doSomething();
	fn.doOtherthing();
</script>
//JS文件
(function myMoudle1() {
    let msg = 'zaozao';
    function doSomething() {
        console.log('doSomething()' + msg.toUpperCase);
    };
    function doOtherthing() {
        console.log('doOtherthing()' + msg.toLowerCase);
    }
    window.myMoudle1 = {
        doSomething: doSomething,
        doOtherthing: doOtherthing
    }
})()

//html文件
<script src="myMoudle1.js"></script>
<script>
	myMoudle1.doSomething();
	myMoudle1.doOtherthing();
</script>

闭包的缺点

缺点

  • 函数执行完后--函数内的局部变量没有释放--占用内存时间会变长
  • 容易造成内存泄漏

解决

  • 能不用闭包就不用闭包
  • 及时释放

内存溢出

  • 一种程序运行出现的错误
  • 当程序运行需要的内存超过了剩余的内存时--就会抛出内存溢出的错误

内存泄漏

  • 占用的内存没有及时释放
  • 内存泄漏积累多了就容易导致内存溢出

常见内存泄漏

  • 意外的全局变量
  • 没有及时清理的计时器或回调函数
  • 闭包

面试题

var name = 'The Window';
var object = {
    name: 'My Object',
    getNameFunc: function () {
        return function () {
            return this.name;
        }
    }
}
//object.getNameFunc()--是对象调用--通过object调用--this为object
//通过object.getNameFunc()--调用函数--object.getNameFunc()()--是函数调用--this为window
alert(object.getNameFunc()());  //The Window
var name2 = 'The Window';
var object = {
    name2: 'My Object',
           var that = this;
        return function () {
            return that.name2;
        }
    }
}
//object.getNameFunc()--是对象调用--通过object调用--this为object
//object.getNameFunc()()--中that是object.getNameFunc()的this--指向object
alert(object.getNameFunc()())       //My Object

原文链接:https://www.cnblogs.com/Liu-h/p/17352722.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:闭包 - Python技术站

(0)
上一篇 2023年4月25日
下一篇 2023年4月27日

相关文章

  • IE6下CSS图片缓存问题解决方法

    针对“IE6下CSS图片缓存问题解决方法”的完整攻略,我将按照以下步骤进行讲解: 1. 问题描述 在IE6浏览器中,当CSS文件中的图片资源发生变化时,页面并不会重新请求图片资源,而是使用了之前缓存的旧图片,导致页面中的图片无法正常显示的问题。 2. 解决方法 为了解决上述问题,我们可以采取以下方法: 2.1 修改图片URL 在图片的URL后面添加一个随机数…

    JavaScript 2023年6月11日
    00
  • 详解JavaScript UTC时间转换方法

    详解JavaScript UTC时间转换方法 在JavaScript中,我们通常使用的日期对象保存的是本地时间。但是,在跨时区使用的情况下,UTC时间经常会被使用。要将本地时间转换为UTC时间,或者将UTC时间转换为本地时间,可以使用JavaScript提供的函数来完成。下面介绍JavaScript UTC时间转换的方法。 1. new Date(Date.…

    JavaScript 2023年5月27日
    00
  • three.js绘制地球、飞机与轨迹的效果示例

    下面是关于”three.js绘制地球、飞机与轨迹的效果示例”的完整攻略。 简介 three.js是一款基于WebGL的JavaScript 3D渲染库,可以用来制作3D场景、动画等效果。在制作3D场景中,绘制地球、飞机与轨迹是比较常见的需求。本文将讲述如何使用three.js实现绘制地球、飞机与轨迹效果。 步骤 1. 准备工作 首先,我们需要引入three.…

    JavaScript 2023年6月11日
    00
  • 基于Next.js实现在线Excel的详细代码

    关于“基于Next.js实现在线Excel的详细代码”的攻略,以下是我可以提供的详细过程: 第一步:安装Next.js 为了实现在线Excel,我们需要安装依赖包Next.js。可以通过npm命令进行安装: npm install next react react-dom 第二步:创建页面 创建一个名为pages/index.js的文件,这将是我们应用程序的…

    JavaScript 2023年6月11日
    00
  • Vue nextTick的原理解析

    Vue.js中的nextTick方法是一个非常有用又有些神秘的工具。其背后的原理和使用方式值得我们深入探究和理解,使我们能够更好地使用Vue.js,写出更加优秀的代码。 什么是nextTick? 在Vue.js中,当我们修改了一个数据后,DOM并不会立刻更新。相反,Vue.js会在内部异步的更新DOM。这种异步更新意味着我们不能马上获取到更新后的DOM,这对…

    JavaScript 2023年6月11日
    00
  • JS前端广告拦截实现原理解析

    让我详细解释一下“JS前端广告拦截实现原理解析”的完整攻略。 什么是JS前端广告拦截? JS前端广告拦截是一种方法,可以通过JavaScript代码模拟用户操作,从而屏蔽网站中的广告内容。 通过JS前端广告拦截,我们可以将网站中的广告屏蔽掉,提高用户体验,加快页面加载速度。 实现原理解析 下面是JS前端广告拦截的实现原理: 使用DOM查找要屏蔽广告的元素 通…

    JavaScript 2023年6月11日
    00
  • 浅析JavaScript访问对象属性和方法及区别

    我来详细讲解“浅析JavaScript访问对象属性和方法及区别”的完整攻略。下面是内容的组成部分: 前言 在JavaScript编程过程中,对象是一个非常重要的概念。对象允许我们组织和存储数据,并提供了一种访问和操作这些数据的机制。然而,访问和操作对象的属性和方法并不是一件简单的事情。本文将通过示例来浅析JavaScript访问对象属性和方法及它们的区别。 …

    JavaScript 2023年5月27日
    00
  • 自定义require函数让浏览器按需加载Js文件

    要让浏览器按需加载JS文件,可以通过自定义require函数来实现。这里介绍一下具体的步骤和实现方法: 1. 实现自定义require函数 在原生的JavaScript中,我们可以使用<script>标签来引入JS文件,但是这种方式需要在页面加载时一次性加载所有JS文件,如果JS文件过多,会影响页面的性能。为了优化页面性能,可以使用自定义requ…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部