zoukankan      html  css  js  c++  java
  • common mistake of closure in loops

    common mistake of closure in loops

      下例中item引用的始终是最后一个值。

    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();
    View Code

      解法一:callback时,加一层closure以保留item状态

    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();
    View Code

      解法二:loop时,加一层closure以保留item状态

    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();
    View Code

      解法三:使用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();
    View Code

    参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

  • 相关阅读:
    Selenium生成Report的利器- ExtentReports
    学习使用monkey 测试
    charles 结合mocky 模拟数据
    Vue.use()源码分析且执行后干什么了
    commonjs 与 es6相关Module语法的区别
    vue函数化组件 functional
    html5细线表格制作
    移动端H5页面禁止长按复制和去掉点击时高亮
    javascript生成器
    promise和生成器的结合
  • 原文地址:https://www.cnblogs.com/tekkaman/p/6610428.html
Copyright © 2011-2022 走看看