• 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

  • 相关阅读:
    XMPP Openfire集成windows身份认证
    WIF claimsbased identity
    VMWare Workstation使用总结几则
    把成熟的代码从.NET移植到Mono 【转】
    工作流jBPM使用总结
    C++实现的IO高效的算法TPIE
    XMPP的简介和基本概念
    NoSQL学习路线图 使用 NoSQL 数据库分析大规模数据[转]
    Spring Security 3 网站安全授权
    jBPM 5 的点滴
  • 原文地址:https://www.cnblogs.com/tekkaman/p/6610428.html
Copyright © 2020-2023  润新知