js高级_闭包

最新推荐文章于 2023-08-21 16:57:34 发布

白日梦codding

最新推荐文章于 2023-08-21 16:57:34 发布

阅读量130

点赞数 2

分类专栏：前端_JS

本文链接：https://blog.csdn.net/weixin_38502653/article/details/101697797

版权

前端_JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

闭包的概念

使用chrome调试查看
- 理解一: 闭包是嵌套的内部函数(绝大部分人)
- 理解二: 包含被引用变量(函数)的对象(极少数人)
- 注意: 闭包存在于嵌套的内部函数中

闭包的产生

在外部函数里的内部函数中，当内部函数，调用外部函数的变量或实参时。同时在全局中
调用了外部函数，产生闭包。一开始，闭包的变量值为未定义，当内部函数被调用时将
外部函数的变量赋值给闭包的变量。

闭包的作用

使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)
让函数外部可以操作(读写)到函数内部的数据(变量/函数)

闭包的生命周期

产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
死亡: 在嵌套的内部函数成为垃圾对象时

闭包的应用

定义JS模块

具有特定功能的js文件
将所有的数据和功能都封装在一个函数内部(私有的)
只向外暴露一个包信n个方法的对象或函数
模块的使用者, 只需要通过模块暴露的对象调用方法来实现对应的功能

Module.js

(function (window) {
  //私有的数据
  var msg = 'atguigu'
  var names = ['I', 'Love', 'you']
  //操作数据的函数
  function a() {
    console.log(msg.toUpperCase())
  }
  function b() {
    console.log(names.join(' '))
  }

  window.coolModule2 =  {
    doSomething: a,
    doOtherthing: b
  }
})(window)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05_闭包的应用_自定义JS模块2</title>
</head>
<body>
<script type="text/javascript" src="Module.js"></script>
<script type="text/javascript">
  //调用闭包函数
  coolModule2.doSomething()
  coolModule2.doOtherthing()
</script>
</body>
</html>

闭包的缺点

缺点
- 函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长
- 容易造成内存泄露
解决
- 能不用闭包就不用
- 及时释放

<script type="text/javascript">
  function fn1() {
    var a = 2;

    function fn2() {
      a++;
      console.log(a);
    }

    return fn2;
  }
  var f = fn1();

  f(); // 3
  f(); // 4

  f = null // 释放
</script>

面试题

<script type="text/javascript">
  /*
   说说它们的输出情况
   */

  //代码片段一,无闭包
  var name = "The Window";
  var object = {
    name: "My Object",
    getNameFunc: function () {
      return function () {
        return this.name;
      };
    }
  };
  console.log(object.getNameFunc()());  //?

  //代码片段二，有闭包，常用
  var name2 = "The Window";
  var object2 = {
    name2: "My Object",
    getNameFunc: function () {
      var that = this;
      return function () {
        return that.name2;
      };
    }
  };
  console.log(object2.getNameFunc()()); //?
</script>

输出：

The Window
My Object

<script type="text/javascript">
  /*
   说说它们的输出情况
   */

  function fun(n, o) {
    console.log(o)
    return {
      fun: function (m) {
        return fun(m, n)
      }
    }
  }
  var a = fun(0)
  a.fun(1)
  a.fun(2)
  a.fun(3) //undefined,?,?,?

  var b = fun(0).fun(1).fun(2).fun(3) //undefined,?,?,?

  var c = fun(0).fun(1)
  c.fun(2)
  c.fun(3) //undefined,?,?,?
</script>

输出：
在这里插入图片描述

白日梦codding

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js高级_闭包

闭包的概念使用chrome调试查看理解一: 闭包是嵌套的内部函数(绝大部分人)理解二: 包含被引用变量(函数)的对象(极少数人)注意: 闭包存在于嵌套的内部函数中闭包的产生在外部函数里的内部函数中，当内部函数，调用外部函数的变量或实参时。同时在全局中调用了外部函数，产生闭包。一开始，闭包的变量值为未定义，当内部函数被调用时将外部函数的变量赋值给闭包的变量。闭包的作用使...
复制链接

扫一扫