DDR爱好者之家

JavaScript闭包原理与用法学习笔记
站长资源 2024/12/27 佚名
40 1538
DDR爱好者之家 Design By 杰米

本文实例讲述了JavaScript闭包原理与用法。分享给大家供大家参考，具体如下：

闭包(Closure)

闭包是一个函数和词法环境的组合，函数声明在这个词法环境中。

  • 词法作用域：

看下面的一个例子：

 
  function init() {
    var name = 'GaoPian';
    // name是局部变量
    function displayName() {
      //displayName();是内部函数，一个闭包
      alert(name); // 使用外部函数声明的变量
    }
 
    displayName();
  }
  init();

init()创建了一个局部变量name和一个函数displayName()。

函数displayName()是一个已经定义在init()内部的函数，并且只能在函数init()里面才能访问得到。

函数displayName()没有自己的局部变量，但由于内部函数可以访问外部函数变量，displayName()可以访问到声明在外部函数init()的变量name，如果局部变量还存在的话，displayName()也可以访问他们。

  • 闭包

看下面一个例子

  function makeFunc() {
    debugger
    var name = 'GaoPian';
 
    function displayName() {
      alert(name);
    }
 
    return displayName;
  }
  var myFunc = makeFunc();
  myFunc();

运行这段代码和之前init()的方法的效果是一样。

经过debugger一遍之后发现：

二者不同之处是，displayName()在执行之前，这个内部方法是从外部方法返回来的。 "htmlcode"> 

  function makeAdder(x) {
    return function (y) {
      return x + y;
    }
  }
  var add5 = makeAdder(5);
  var add10 = makeAdder(10);
  console.log(add5(2)); // 7
  console.log(add10(2)); // 12

在这个例子当中，我们定义了一个函数makeAdder(x)，传递一个参数x，并且返回一个函数，这个返回函数接收一个参数y，并返回x和y的和。 "htmlcode"> 

  <style>
    body {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 12px;
    }
 
    h1 {
      font-size: 1.5em;
    }
 
    h2 {
      font-size: 1.2em;
    }
  </style>

我们设置的调节字体大小的按钮能够改变body的font-size，并且这个调节能够通过相对字体单位，反应到其他元素上，

  function makeSizer(size) {
    return function () {
      document.body.style.fontSize = size + 'px';
    };
  }
  var size12 = makeSizer(12);
  var size14 = makeSizer(14);
  var size16 = makeSizer(16);

size12,size14,size16是三个分别把字体大小调整为12,14,16的函数，我们可以把他们绑定在按钮上。

<button id="size-12">12</button>
<button id="size-14">14</button>
<button id="size-16">16</button>

document.getElementById('size-12').onclick = size12; 
document.getElementById('size-14').onclick = size14; 
document.getElementById('size-16').onclick = size16;

通过闭包来封装私有方法：类似JAVA语言能够声明私有方法，意味着只能够在相同的类里面被调用，JS无法做到这一点，但却可以通过闭包来封装私有方法。私有方法不限制代码：他们提供了管理命名空间的一种强有力方式。

下面代码阐述了怎样使用闭包来定义公有函数，公有函数能够访问私有方法和属性。

  var counter = (function () {
    debugger;
    var privateCounter = 0;
 
    function changeBy(val) {
      privateCounter += val;
    }
 
    return {
      increment: function () {
        changeBy(1);
      },
      decrement: function () {
        changeBy(-1);
      },
      value: function () {
        return privateCounter;
      }
    };
  })();
  console.log(counter.value());// 0
  counter.increment();
  counter.increment();
  console.log(counter.value());// 2
  counter.decrement();
  console.log(counter.value()); // 1

在之前的例子当中，每个闭包具有他们自己的词法环境，而在这个例子中，我们创建了一个单独的词法环境，这个词法环境被3个函数所共享，这三个函数是counter.increment, counter.decrement和counter.value。

共享的词法环境是由匿名函数创建的，一定义就可以被执行，词法环境包含两项：变量privateCounter和函数changeBy，这些私有方法和属性不能够被外面访问到，然而，他们能够被返回的公共函数访问到。这三个公有函数就是闭包，共享相同的环境，JS的词法作用域的好处就是他们可以互相访问变量privateCounter和changeBy函数。

下面一个例子：

  var makeCounter = function () {
    var privateCounter = 0;
 
    function changeBy(val) {
      privateCounter += val;
    }
 
    return {
      increment: function () {
        changeBy(1);
      }, decrement: function () {
        changeBy(-1);
      }, value: function () {
        return privateCounter;
      }
    }
  };
  var counter1 = makeCounter();
  var counter2 = makeCounter();
  alert(counter1.value());
  /* Alerts 0 */
  counter1.increment();
  counter1.increment();
  alert(counter1.value());
  /* Alerts 2 */
  counter1.decrement();
  alert(counter1.value());
  /* Alerts 1 */
  alert(counter2.value());
  /* Alerts 0 */

两个计数器counter1和counter2分别是互相独立的，每个闭包具有不同版本的privateCounter，每次计数器被调用，词法环境会改变变量的值，但是一个闭包里变量值的改变并不影响另一个闭包里的变量。

  • 循环中创建闭包：常见错误

看下面一个例子：

<p id="help">Helpful notes will appear here</p>
<p>E-mail:
  <input type="text" id="email" name="email">
</p>
<p>Name:
  <input type="text" id="name" name="name">
</p>
<p>Age:
  <input type="text" id="age" name="age">
</p>

  function showHelp(help) {
    document.getElementById('help').innerHTML = help;
  }
  function setupHelp() {
    var helpText = [{'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}];
    for (var i = 0; i < helpText.length; i++) {
      var item = helpText[i];
      document.getElementById(item.id).onfocus = function () {
        showHelp(item.help);
      }
    }
  }
  setupHelp();

helpText 数组定义了三个有用的hint，每个分别与输入框的id相对应，每个方法与onfocus事件绑定起来。当你运行这段代码的时候，不会像预期的那样工作，不管你聚焦在哪个输入框，始终显示你的age信息。

原因在于，分配给onfocus事件的函数是闭包，他们由函数定义构成，从setupHelp函数的函数作用域获取。三个闭包由循环所创建，每个闭包具有同一个词法环境，环境中包含一个变量item.help,当onfocus的回调执行时，item.help的值也随之确定，循环已经执行完毕，item对象已经指向了helpText列表的最后一项。

解决这个问题的方法是使用更多的闭包，具体点就是提前使用一个封装好的函数：

  function showHelp(help) {
    document.getElementById('help').innerHTML = help;
  }
  function makeHelpCallback(help) {
    return function () {
      showHelp(help);
    };
  }
  function setupHelp() {
    var helpText = [{'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}];
    for (var i = 0; i < helpText.length; i++) {
      var item = helpText[i];
      document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
    }
  }
  setupHelp();

上面代码运行正常，回调此时不共享一个词法环境，makeHelpCallback函数给每个回调创造了一个词法环境，词法环境中的help指helpText数组中对应的字符串，使用匿名闭包来重写的例子如下：

  1. function showHelp(help) {
    document.getElementById('help').innerHTML = help;
  }
  function setupHelp() {
    var helpText = [{'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}];
    for (var i = 0; i < helpText.length; i++) {
      (function () {
        var item = helpText[i];
        document.getElementById(item.id).onfocus = function () {
          showHelp(item.help);
        }
      })();
      // Immediate event listener attachment with the current value of item (preserved until iteration).
    }
  }
  setupHelp();

如果不想使用闭包，也可以使用ES6的let关键字：

  function showHelp(help) {
    document.getElementById('help').innerHTML = help;
  }
  function setupHelp() {
    var helpText = [{'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}];
    for (var i = 0; i < helpText.length; i++) {
      let item = helpText[i];
      document.getElementById(item.id).onfocus = function () {
        showHelp(item.help);
      }
    }
  }
  setupHelp();

这个例子使用let代替var，所以，每个闭包绑定了块级作用域，也就意味着不需要额外的闭包。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米