JS之闭包的应用

Posted jiaweixie

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS之闭包的应用相关的知识,希望对你有一定的参考价值。

闭包的应用

在什么场合下用

  • 1、保护变量;用自运行的匿名函数来实现;
  • 2、协调异步代码;自运行的匿名函数来实现,并且传参进去(异步代码需要用到原来的变量,通过作为函数的参数传进去);

  

保护变量:

  • 实例:循环赋值函数(循环绑定函数)
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="div1">
  <p>0000</p>
  <p>1111</p>
  <p>2222</p>
  <p>3333</p>
  <p>4444</p>
</div>
<script>
var oDiv = document.getElementById("div1");
var oPs = oDiv.getElementsByTagName("p");
for (i = 0; i < oPs.length; i++) {
  (function (i){
    oPs[i].onclick = function () {
      console.log(i);
    }
  })(i);
}
</script>
</body>

上面的也可以改造成这样的;(也是闭包的应用)

for (i = 0; i < oPs.length; i++) {
    oPs[i].onclick = function (i) {
        return function(){console.log(i);}
    }(i)
}

如果我们把代码改成这样:

for (i = 0; i < oPs.length; i++) {
    oPs[i].onclick = function () {
      console.log(i);
    }
}

则点击每个标签的结果都是 5

  • 实例:计时器
‘use strict‘;

function create_counter(initial) {
    var x = initial || 0;
    return {
        inc: function () {
            x += 1;
            return x;
        }
    }
}

var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3
  • 实例: JQuery的全局调用
(function () {
    var jQuery = function () {
      console.log("核心代码");
    };
    window.jQuery = window.$ = jQuery;
})();
jQuery(); // 核心代码
$(); // 核心代码
  • 实例:

    多参数的函数变成单参数的函数。例如,要计算 ${x^y}$ 可以用Math.pow(x, y)函数,不过考虑到经常计算x2或x3,我们可以利用闭包创建新的函数pow2pow3

    ‘use strict‘;
    
    function make_pow(n) {
        return function (x) {
            return Math.pow(x, n);
        }
    }
    // 创建两个新函数:
    var pow2 = make_pow(2);
    var pow3 = make_pow(3);
    
    console.log(pow2(5)); // 25
    console.log(pow3(7)); // 343
    

协调异步代码:

  • 实例:动画 setTimeout实现把p相对上一个p向右移动100px;1秒中只实现一个p的移动;

    setTimeout本身是同步的代码,但是setTimeout里面的函数是异步的代码setTimeout告诉浏览器隔多少秒执行里面的函数;这个函数是脱离执行顺序的;属于异步代码;

var oDiv = document.getElementById("div1");
var oPs = oDiv.getElementsByTagName("p");
for (i = 0; i < oPs.length; i++) {
    (function(i){
        setTimeout(function(){
            oPs[i].style.left=100*i+"px";
        },i*1000)
    })(i);
}

refers:

廖雪峰老师

朱安邦的JS笔记

以上是关于JS之闭包的应用的主要内容,如果未能解决你的问题,请参考以下文章

js闭包之应用场景

JS---闭包

JS闭包

javascript深入理解js闭包

深入理解JS的闭包

js之认识闭包