回调引用作为Javascript中的参数

Question

var clientData = {
    id: 1969,
    fullName: "Not Set",
    setUserName: function (firstName, lastName)  {
      clientData.fullName = firstName + " " + lastName;
      console.log(clientData.fullName);
    }
};

function getUserInput(firstName, lastName, callback)  {  
  //why can't I say clientData.callback (firstName, lastName); instead
  callback (firstName, lastName);
}

getUserInput ("Peter", "Pan", clientData.setUserName);

As is commented in the code, why can't I say clientData.callback (firstName, lastName); if what the callback argument is referencing is the function that should be accessible from clientData with dot access? If clientData.setUserName is just a reference to a function object, I shouldn't be accidentally saying clientData.clientData.setUsername with my commented code, right?

I'm a beginner, and because it's not working I'm sure I'm thinking of something wrong.

Answer 1

clientData.callback would literally try to access property callback on clientData . Think about clientData.callback being equivalent to clientData['callback'] .

What comes after the . is not treated as a variable. Even if it were, the value of callback is a function . You can't use a function as property name . Property names are strings .

Answer 2

When you create a function, think of the arguments as variables used in the function. When you do:

function getUserInput(firstName, lastName, callback)

and you call it with:

getUserInput ("Peter", "Pan", clientData.setUserName);

What implicitly happens at the top of the function is:

var firstName = "Peter";
var lastName = "Pan";
var callback = clientData.setUserName

Whatever you pass in as callback is referenced inside the function as callback . So if you pass in clientData.setUserName , it doesn't matter that it belongs to an object called clientData - it is still referred to as callback inside.

Answer 3

Try using:

function getUserInput(firstName, lastName)  {  
  clientData.setUserName (firstName, lastName);
}