In javascript, a function is a class of objects, which means that it can be passed as a parameter to other functions; in addition, the function can also provide scope.
The basic part of js function: JavaScript learning notes (IV) function function part
Syntax for creating a function
Named function expressions
The code copy is as follows:
//Name function expression
var add = function add(a,b){
return a+b;
};
Function expressions
The code copy is as follows:
//Also known as anonymous function
var add = function(a,b){
return a+b;
};
Declaration of functions
The code copy is as follows:
function foo(){
//code here
} //No semicolon is needed here
In trailing semicolons, function expressions should always use semicolons, and the ending of semicolons is not required in the function's declaration.
Function declarations and expressions
Function promotion (hoisting)
The behavior of a function declaration is not equivalent to a named function expression. The difference is the hoisting behavior. See the following example:
The code copy is as follows:
<script type="text/javascript">
//Global Function
function foo(){alert("global foo!");}
function bar(){alert('global bar');}
function hoist(){
console.log(typeof foo);//function
console.log(typeof bar);//undefined
foo();//local foo!
bar();//TypeError: 'undefined' is not a function
//Variable foo and implementer are promoted
function foo(){
alert('local foo!');
}
//Only the variable bar is promoted, the function implementation part is not promoted
var bar = function(){
alert('local bar!');
};
}
hoist();
</script>
For all variables, wherever they are declared in the body, they are internally promoted to the top of the function. The reason for general application of functions is that functions are only objects assigned to variables.
As the name suggests, improvement means mentioning the following things to the top. In JS, it is to upgrade the things defined in the following (variables or functions) to the previous definition. As can be seen from the above example, foo and bar in the function hoist inside the function move to the top, thus covering the global foo and bar functions. The difference between local functions bar and foo is that foo is promoted to the top and can run normally, while the definition of bar() has not been improved, only its declaration is promoted. Therefore, when bar() is executed, the result is undefined instead of being used as a function.
Real-time function mode
Functions are also objects, so they can be used as return values. The advantage of using self-executing functions is to directly declare an anonymous function and use it immediately, so as to avoid defining a function that is not used once, and it is avoided from the problem of naming conflicts. There is no concept of namespace in js, so it is easy to have function name conflicts. Once a naming conflict is made, the last declared one shall prevail.
Mode 1:
The code copy is as follows:
<script>
(function () {
var a = 1;
return function () {
alert(2);
};
}()());//Pop 2, the first parentheses execute themselves, and the second parentheses execute internal anonymous function
</script>
Pattern 2: Pointing of self-executing function variables
The code copy is as follows:
<script type="text/javascript">
var result = (function () {
return 2;
})();//The function has been executed here
alert(result);//result points to the return value 2 of the self-executed function; if result() pops up, an error will occur.
</script>
Pattern Three: Nested Functions
The code copy is as follows:
<script type="text/javascript">
var result = (function () {
return function () {
return 2;
};
})();
alert(result());//2 pops up when alert(result); function(){return 2}
</script>
Mode 4: Self-execution function assigns its return value to a variable
The code copy is as follows:
var abc = (function () {
var a = 1;
return function () {
return ++a;
}
})();//The self-executing function returns the function after return to the variable
alert(abc());//If it is alert(abc), the code after the return statement will pop up; if it is abc(), the function after the return will be executed
Pattern 5: The function executes itself internally, recursively
The code copy is as follows:
// This is a self-executing function, the function executes itself internally, recursively
function abc() { abc(); }
Callback mode
Callback function: When you pass a function write() as an argument to another function call(), then call() may execute (or call) write() at some point. In this case, write() is called a callback function.
Asynchronous event listener
Callback mode has many uses, for example, when an event listener is attached to an element on the page, it actually provides a pointer to a callback function that will be called when the event occurs. like:
The code copy is as follows:
document.addEventListener("click",console.log,false);
The above code example shows the callback function console.log() in bubble mode when the document clicks.
JavaScript is especially suitable for event-driven programming, because callback mode supports programs to run asynchronously.
time out
Another example of using callback mode is when using the timeout method provided by the browser's window object: setTimeout() and setInterval(), such as:
The code copy is as follows:
<script type="text/javascript">
var call = function(){
console.log("100ms will be asked...");
};
setTimeout(call, 100);
</script>
Callback mode in the library
When designing a JS library, the callback function will come in handy. The code of a library should use reusable code as much as possible, and the callback can help achieve this generalization. When we design a huge js library, the fact is that users don't need most of it, we can focus on core functions and provide callback functions in "hook form", which will make it easier for us to build, scale, and customize library methods
Currying
Currying is a technique that converts a function into a new simplified (to accept fewer parameters) function by filling multiple parameters into a function body. ――【Proficient in JavaScript】
Simply put, curryization is a conversion process, that is, the process of our function conversion. As shown in the following example:
The code copy is as follows:
<script type="text/javascript">
//curry-based add() function
function add(x,y){
var oldx = x, oldy = y;
if(typeof oldy == "undefined"){
return function(newy){
return oldx + newy;
};
}
//Full application
return x+y;
}
//test
typeof add(5);//Output "function"
add(3)(4);//7
//Create and store a new function
var add2000 = add(2000);
add2000(10);//Output 2010
</script>
When add() is called for the first time, it creates a closure for the returned internal function. This closure stores the original x and y values into the private variables oldx and oldy.
Now we will be able to use arbitrary function curry common methods, such as:
The code copy is as follows:
<script type="text/javascript">
//Normal functions
function add(x,y){
return x + y;
}
//curry a function to obtain a new function
var newadd = test(add,5);
newadd(4);//9
//Another option, call the new function directly
test(add,6)(7);//Output 13
</script>
When to use Curry
When it is found that the same function is being called and most of the passed parameters are the same, then the function may be a good candidate for curryization