zoukankan      html  css  js  c++  java
  • [Javascript] Closure Cove, Common mistake

    They’ve got a problem with their existing code, which tries to use a closure. Check it out:

    function assignLaser( shark, sharkList ){
      var stationAssignment;
      for(var i = 0; i<sharkList.length; i++){
        if(shark == sharkList[i]){
          stationAssignment = function(){
            alert("Yo, " +
                  shark +
                  "!
    " +
                  "Visit underwater strapping station " +
                  i +
                  " for your sweet laser.
    " +
                  "'Bout to get real up in here."
                 );
          };
        }
      }
      return stationAssignment;
    }

    Solution ONE:

    Remove stationAssignment here, it will hold the i variable until the loop end, so return the fucntion immediatly when you find the value.

    function assignLaser( shark, sharkList ){
      for(var i = 0; i<sharkList.length; i++){
        if(shark == sharkList[i]){
          return function(){
            alert("Yo, " +
                  shark +
                  "!
    " +
                  "Visit underwater strapping station " +
                  i +
                  " for your sweet laser.
    " +
                  "'Bout to get real up in here."
                 );
          };
        }
      }
    }

    Solution TWO:

    var sharkList = ["yrr", "wff", "eff", "gee"];
    function makerLaserAssigner(sharkList){
        return function(shark){
            for(var i = 0; i<sharkList.length; i++){
                if(shark == sharkList[i]){
                    alert("Yo, " +
                          shark +
                          "!
    " +
                          "Visit underwater strapping station " +
                          i +
                          " for your sweet laser.
    " +
                          "'Bout to get real up in here."
                         );                
                }
            }
        };
    }
    var getSharkLaser = makerLaserAssigner(sharkList);
    getSharkLaser("eff");

    --------------------------------EX-----------------------

    The Dev Girls now need a target assignment for each shark. For your reference, the lists of sharks and targets is as follows:

    var listOfSharks = ["Sea Pain", "Great Wheezy",
                        "DJ Chewie", "Lil' Bitey",
                        "Finmaster Flex", "Swim Khalifa",
                        "Ice Teeth", "The Notorious J.A.W."];
    var listOfTargets = ["icicle bat", "snow yeti",
                         "killer penguin", "frost tiger",
                         "polar bear", "iceberg",
                         "blue witch", "wooly mammoth"];

    The Devs want to use the following function call whenever they need to find the right target for any shark:

    var getTargetFor = makeTargetAssigner(  listOfSharks,
                                            listOfTargets );
    getTargetFor("Ice Teeth");

    Here’s an example of the pop-up alert that the devs would like their call to getTargetFor to produce:

    What up, Ice Teeth!
    There've been blue witch sightings in our 'hood!
    Time for a swim-by lasering, homie!

    *Note: A shark’s list index matches the index of the target it is supposed to eliminate.

    YOUR goal is to build out the makeTargetAssigner function with a useful closure, so that it returns a function that can be used in the manner the devs are asking for. To help us check your work more efficiently, use shark as the parameter for a shark’s name in your closure function. You may want to use your own browser’s console to test a few inputs!

    Answer:

    function makeTargetAssigner( sharks, targets ){
      return function(shark){
            var s_i = sharks.indexOf(shark);
        var t_i = s_i;
        var target = targets[t_i];
        alert("What up,"+" "+
             shark+
             "!
    "+
             "There've been"+" "+
             target+
             " sightings in our 'hood!
    "+
             "Time for a swim-by lasering, homie!");
      };
    }
  • 相关阅读:
    JS的toFixed方法设置小数点位数后再进行计算,数据出错问题
    表单input项使用label,同时引用Bootstrap库,导致input点击效果区增大
    表单多文件上传样式美化 && 支持选中文件后删除相关项
    Fiddler使用AutoResponder进行本地文件和线上文件的映射
    ES6笔记(7)-- Promise异步编程
    ES6笔记(6)-- Set、Map结构和Iterator迭代器
    ES6笔记(5)-- Generator生成器函数
    ES6笔记(4)-- Symbol类型
    ES6笔记(3)-- 解构赋值
    ES6笔记(2)-- let的块级作用域
  • 原文地址:https://www.cnblogs.com/Answer1215/p/3890976.html
Copyright © 2011-2022 走看看