js之闭包

最新推荐文章于 2024-10-02 05:39:15 发布

辽辽无期

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量361

点赞数 10

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/yaya_xiaohui/article/details/136295599

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

          /*需求: 点击某个按钮, 提示"点击的是第n个按钮"*/
    </script>
</head>
<body>
    <button>测试1</button>
    <button>测试2</button>
    <button>测试3</button>
</body>
</html>

var btns = document.getElementsByTagName('button');
// 遍历&监听
for(var i = 0, length = btns.length; i < length; i++) {
    var btn = btns[i];
    btn.onclick = function () {
        alert('第' + (i + 1) + '个');
    }
}
console.log(i) // 3

普通实现方式

var btns = document.getElementsByTagName('button');
// 遍历&监听
for(var i = 0, length = btns.length; i < length; i++) {
    var btn = btns[i];
    // 将btn所对应的下标保存在btn上
    btn.index = i;
    btn.onclick = function () {
        alert('第' + (this.index + 1) + '个');
    }
}

利用闭包的实现

var btns = document.getElementsByTagName('button');
// 遍历&监听
for(var i = 0, length = btns.length; i < length; i++) {
    (function(i){
        var btn = btns[i]; // 局部的i
        btn.onclick = function () {
            alert('第' + (i + 1) + '个');
        } 
    })(i); // 全部的i
}

如何产生闭包
一个嵌套的内部（子）函数引用了嵌套的外部（父）函数的变量（函数）时，就产生了闭包。

闭包是什么

理解一: 绝大部分人认为 “闭包是嵌套的内部函数”
理解二: 极少数认为 “包含被引用变量(函数)的对象”
注意: 闭包存在于嵌套的内部函数中，倾向于第二种理解

产生闭包的条件

存在函数嵌套
内部函数引用了外部函数的数据(变量/函数)，并执行了外部函数 ( 执行函数定义之后，才产生闭包，不必非得执行(调用)内部函数 )

闭包的作用

使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)
让函数外部可以操作(读写)到函数内部的数据(变量/函数)，外部不能修改内部变量的值
缺点：函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长，容易造成内存泄露。
闭包的生命周期
产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
死亡: 在嵌套的内部函数成为垃圾对象时

<script type="text/javascript">
function fun1() {
  //问题2: 此时闭包产生了吗? 产生了，函数提升，内部函数已经创建！
  var a = 3;
  function fun2() {
    a++;
    console.log(a);
  }
  return fun2;
}

//问题1: 此时闭包产生了吗?   产生了
var f = fun1();
//问题3: 此时闭包释放了吗?  // 没有
f();
f();
//问题4: 此时闭包释放回收了吗?   // 没有
//问题5: 如何让闭包释放回收呢?  f = null; 包含闭包的函数对象成为了垃圾对象！
</script>