将函数分配给数组的元素。 如何绑定函数的输出？

Question

I am trying to create a 'secret' guestList to practice some closures and binding in JS. I am currently stuck because I need to use binding so the value of i updates after every iteration but I am really new to biding and I am having trouble wrapping my head around this... how do I call my variable code from the closure? how do I correctly bind the guesName to my checkCode function? :/

Here my code :

function guestListFns(guestList, secretCode){
    var topSecretList = []; 
    function codeChecker(code) {
        if (code === secretCode) {
            return guestName;
        } else {
            return "Secret-Code: Invalid";
        }
    };
    for(var i = 0 ; i < guestList.length; i += 1){
        var guestName = guestList[i]; 
            topSecretList.push(codeChecker.call(this.guestName, code));
    }
    console.log(topSecretList);

        return topSecretList; 
}

my testing values :

    var guestListFns = guestListFns(["Gabriel", "Ben", "Dan", "Griffin", "Cang", "Kate", "Chris"], 512);

var guest = guestListFns[1](512);
console.log(guest);

my return value so far:

"code is not defined" 

Also, I have already figured out how to implement this function simply using map. But what I meant with this exercise is to practice binding so I can understand the concept.

Thanks!

Answer 1

You dont wanna call , but you want to bind :

codeChecker.bind({ guestName })

So now inside codeChecker you can access

this.guestName

---

Actually you are overcomplicating things:

 const guestListFns = (arr, secret) =>
   arr.map(el => code => code === secret ? el : "nope");

Answer 2

If I understand what you are trying, I think call() is the wrong way to go about this. You want an array of partial functions where each function already has the name. You can use bind() for this. call() actually invokes the function, which isn't what you really want here. bind() returns a new function and allows you to set this and/or some of the arguments:

 function guestListFns(guestList, secretCode){ var topSecretList = []; function codeChecker(guestName, code) { if (code === secretCode) { return guestName; } else { return "Secret-Code: Invalid"; } }; for(var i = 0 ; i < guestList.length; i += 1){ var guestName = guestList[i]; topSecretList.push(codeChecker.bind(null, guestName)); } return topSecretList; } var guestListFns = guestListFns(["Gabriel", "Ben", "Dan", "Griffin", "Cang", "Kate", "Chris"], 512); console.log(guestListFns[1](512)); // ben console.log(guestListFns[2](512)); // dan console.log(guestListFns[1](112)); // bad code 

Answer 3

Might this be what you're looking for?

 function guestListFns(guestList, secretCode){ var topSecretList = []; function codeChecker(code) { if (code === secretCode) { return this.guestName; } else { return "Secret-Code: Invalid"; } }; for(var i = 0 ; i < guestList.length; i += 1){ var guestName = guestList[i]; topSecretList.push(codeChecker.bind({guestName:guestName})); } console.log(topSecretList); return topSecretList; } var gfn = guestListFns(["Gabriel", "Ben", "Dan", "Griffin", "Cang", "Kate", "Chris"], 512); gfn.forEach(f => console.log(f(512)));