What is a closure?
A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly.
You create a closure by adding a function inside another function.
A Basic Example of Closures in JavaScript:
function showName (firstName, lastName) { | |
var nameIntro = "Your name is "; | |
// this inner function has access to the outer function's variables, including the parameter | |
function makeFullName () { | |
return nameIntro + firstName + " " + lastName; | |
} | |
| |
return makeFullName (); | |
} | |
| |
showName ("Michael", "Jackson"); // Your name is Michael Jackson |
What is a Callback or Higher-order Function?
A callback function, also known as a higher-order function, is a function that is passed to another function (let’s call this other function “otherFunction”) as a parameter, and the callback function is called (or executed) inside the otherFunction. A callback function is essentially a pattern (an established solution to a common problem), and therefore, the use of a callback function is also known as a callback pattern.Consider this common use of a callback function in jQuery:
//Note that the item in the click method's parameter is a function, not a variable. | |
//The item is a callback function | |
$("#btn_1").click(function() { | |
alert("Btn 1 Clicked"); | |
}); |
How Callback Functions Work?
We can pass functions around like variables and return them in functions and use them in other functions. When we pass a callback function as an argument to another function, we are only passing the function definition. We are not executing the function in the parameter. In other words, we aren’t passing the function with the trailing pair of executing parenthesis () like we do when we are executing a function.And since the containing function has the callback function in its parameter as a function definition, it can execute the callback anytime.
Callback Functions Are Closures
When we pass a callback function as an argument to another function, the callback is executed at some point inside the containing function’s body just as if the callback were defined in the containing function. This means the callback is a closure
Example: Pass Parameters to Callback Functions
Since the callback function is just a normal function when it is executed, we can pass parameters to it. We can pass any of the containing function’s properties (or global properties) as parameters to the callback function. In the preceding example, we pass options as a parameter to the callback function. Let’s pass a global variable and a local variable:
//Global variable | |
var generalLastName = "Clinton"; | |
| |
function getInput (options, callback) { | |
allUserData.push (options); | |
// Pass the global variable generalLastName to the callback function | |
callback (generalLastName, options); | |
} |
var url='/FindUserByID/2';
GetFunction(url,loadGardenByCountryCode);//
funcToExecute is
loadGardenByCountryCode
function GetFunction(url,
funcToExecute
) {
$.ajax({
url: url,
method: 'GET',
success: function (data) {
if (
funcToExecute
) {funcToExecute
(data); // execute callback function. function name can be variable
}
},
error: function (data) {
console.log('error');
}
});
}
$('#AddThirdParty').click(function() {
var func = new function() {
alert('1');
alert('2');
alert('3');
}
alert('4');
LoadHtml(func);
alert('5');
});
function LoadHtml(funcToExecute) {
//load some async content
funcToExecute;
}
0 comments:
Post a Comment