[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 +
              "!\n" +
              "Visit underwater strapping station " +
              i +
              " for your sweet laser.\n" +
              "'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 +
              "!\n" +
              "Visit underwater strapping station " +
              i +
              " for your sweet laser.\n" +
              "'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 +
                      "!\n" +
                      "Visit underwater strapping station " +
                      i +
                      " for your sweet laser.\n" +
                      "'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+
         "!\n"+
         "There've been"+" "+
         target+
         " sightings in our 'hood!\n"+
         "Time for a swim-by lasering, homie!");
  };
}

 

posted @ 2014-08-04 20:57  Zhentiw  阅读(206)  评论(0编辑  收藏  举报