Detailed explanation of function pattern in JavaScript_javascript skills

The role of JavaScript design patterns is to improve the reusability and readability of code, making it easier to maintain and expand the code

In JavaScript, a function is a type of object, which means that it can be passed as a parameter to other functions; in addition, functions can also provide scope.

Syntax for creating functions

Named function expression

Copy code The code is as follows:

//Named function expression
var add = function add(a,b){
Return a b;
};

Function expression

Copy code The code is as follows:

//Also known as anonymous function
var add = function(a,b){
Return a b;
};

The value assigned to the variable add is the function definition itself. In this way, add becomes a function that can be called anywhere.

Declaration of function

Copy code The code is as follows:

function foo(){
//code here
} //No semicolon is needed here

A trailing semicolon should always be used in function expressions, and a trailing semicolon is not required in function declarations.

Function declarations and expressions

Hoisting of functions

The behavior of function declarations is not equivalent to that of named function expressions. The difference lies in the hoisting behavior. See the following example:

Copy code The code is as follows:

All variables, no matter where they are declared in the function body, are internally hoisted to the top of the function. The reason why it is universally applicable to functions is that functions are just objects assigned to variables.

Ascension, as the name suggests, is to lift things below to the top. In JS, it is to promote things (variables or functions) defined at the end to be defined at the front. As can be seen from the above example, foo and bar inside the function hoist are moved 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() is not promoted, only its declaration is promoted, so when bar() is executed, the result is displayed as undefined instead of being used as a function.

Instant function mode

Functions are also objects, so they can serve as return values. The advantage of using a self-executing function is to directly declare an anonymous function and use it immediately, eliminating the need to define a function that is used once and then not using it, and avoiding the problem of naming conflicts. There is no concept of namespace in js, so it is easy for function name conflicts to occur. In the event of a naming conflict, the last one declared shall prevail.

Mode 1:

Copy code The code is as follows:

<script><br> (function () {<br>       var a = 1;<br>          return function () {<br> alert(2);<br>         };<br> }()());//Pop up 2, the first parenthesis is self-executing, and the second parentheses executes the internal anonymous function <br> </script>

Mode 2: Pointing to self-executing function variables

Copy code The code is as follows:

Mode 3: Nested functions

Copy code The code is as follows:

Mode 4: The self-executing function assigns its return value to a variable

Copy code The code 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 return will be executed

Mode 5: The function executes itself internally, recursively

Copy code The code 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 a parameter to another function call(), then call() may execute (or call) write() at a certain moment. In this case, write() is called a callback function.

Asynchronous event listener

The callback pattern has many uses. For example, when attaching an event listener to an element on the page, it actually provides a pointer to a callback function that will be called when the event occurs. Such as:

Copy code The code is as follows:

document.addEventListener("click",console.log,false);

The above code example shows the passed to the callback function console.log() in bubbling mode when the document click event is

Javascript is particularly suitable for event-driven programming because the callback mode supports the program to run asynchronously.

Timeout

Another example of using the callback mode is when using the timeout methods provided by the browser's window object: setTimeout() and setInterval(), such as:

Copy code The code is as follows:

Callback pattern in the library

When designing a js library, callback functions will come in handy. The code of a library should use reusable code as much as possible, and callbacks can help achieve this generalization. When we design a huge js library, in fact, users will not need most of the functions, and we can focus on the core functions and provide callback functions in "hook form", which will make it easier for us to build, Extensions, and custom library methods

Curry

Curry technology is a technology that converts a function into a new simplified (making it accept fewer parameters) function by filling multiple parameters into the function body. ————【Proficient in JavaScript】

Simply put, Currying is a conversion process, that is, the process in which we perform function conversion. Example below:

Copy code The code is as follows:

When add() is called for the first time, it creates a closure for the returned inner function. This closure stores the original x and y values ​​into private variables oldx and oldy.

Now, we will be able to use the general methods of any function curry, such as:

Copy code The code is as follows:

When to Use Currying

When it is found that the same function is being called, and the parameters passed are overwhelmingly the same, then the function may be a good candidate parameter for currying