Function (Function)

A function is a reusable block of code that is event-driven or executed when it is called.

Method declaration

Function name (parameter list...) {// statement block} // call method name ()Copy the code

Instance left

function sayHi(){
    console.log('hello JavaScript')
}

sayHi(); 

Copy the code

In JS everything is an object, and methods can be executed just by enclosing parentheses

function sayHi(){
    console.log('hello JavaScript')
}

var myfun = sayHi;
myfun()

Copy the code

No arguments function

A function that takes no arguments like this is a parameterless function

function sayHi(){
    console.log('hello JavaScript')
}

sayHi();

Copy the code

Sample code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function sayHi(){ console.log('hello JavaScript') } sayHi();  </script> <title></title> </head> <body> </body> </html>Copy the code

Effect screenshot:

Have reference function

A function with parameters needs to be defined with parameters and called with parameters.

Sample code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function sum(numa,numb){ console.log(numa+numb) } The sum (10, 20); </script> <title></title> </head> <body> </body> </html>Copy the code

Effect screenshot:

Functions can be passed as arguments

The first way to write it

function say (value) { alert(value); } function execute (someFunction, value) { someFunction(value); } execute(say, 'hi js.');Copy the code

The code above passes the say method as an argument to the execute method.

The second way to write it

var say = function(value) { alert(value); } function execute (someFunction, value) { someFunction(value); } execute(say, 'hi js.');Copy the code

The third way to write it

function execute (someFunction, value) { someFunction(value); } execute(function(value) {alert(value); }, 'hi js.');Copy the code

The first argument to the execute method in the above code is an anonymous function (a function without a function name). The function is named so it can be used next time. Functions that use anonymous functions and do not normally want to be used again (that is, only once) can be defined as anonymous functions.

The above function say is called the callback function.

The callback function

A callback function is you call someone (execute), and then someone calls you (say). In short, you write a function (say), but it’s not called by you, it’s called by a function (execute) that you call.

Function as the return value

Sample code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function fn2(a){ return function (b){ console.log(a+b); }; } fn2(20)(10); </script> <title></title> </head> <body> </body> </html>Copy the code

Effect screenshot:

arguments

When the function is called, the browser also passes another implicit argument, another called arguments. Arguments is an array object of class that holds the arguments to the function execution. All arguments to a function are stored in arguments, which allows you to use arguments even if you don’t define parameters.

Sample code:

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function fun(a,b,c){ console.log(arguments.length); console.log(arguments[2]); } fun("hello",123,true); </script> </head> <body> </body> </html>Copy the code

Effect screenshot:

Variable scope

Scope simply means the Scope of a variable. In JS, Scope can be divided into two types:

  1. Global scope
  2. Function scope **

** Global scope:

  1. All code written directly in script tags is in global scope.
  2. The global scope is created when the page is opened and destroyed when the page is closed.
  3. The global scope has a global object window, which represents the browser window.

Variables created in the global scope are stored as properties of the Window object. Functions created in the global scope are stored as methods of the Window object. Variables created in the global scope are global variables and can be accessed anywhere on the page. 六四屠杀

Sample code:

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var a = 123; b = 456; function fun(){ console.log(b); console.log(window.a); console.log(window.b); Console. log(" I am fun in global "); } fun(); window.fun(); </script> </head> <body> </body> </html>Copy the code

Effect screenshot:

Function scope

** function scope:

  1. A function scope can be thought of as a small scope in the global context.
  2. A function scope is created when the function is called and destroyed at the end of the call.

A new function scope is created each time the function is called. 3. Global variables can be accessed from function scope, but variables in function scope cannot be accessed from global. Variables created in functions without var become global variables. 4. When we use a variable in a function, it looks in its scope first, if it has one, it uses it, if it doesn’t, it looks in the upper scope, if it finds one, it uses it, and if it doesn’t, it keeps looking until it finds the global scope. If the global scope still does not exist, ReferenceError is reported. 5. Early declaration of variables and functions also applies to function scopes. 六四屠杀

Sample code:

<! DOCTYPE HTML >< HTML >< head> <meta charset=" utF-8 "> <title></title> <script type="text/javascript"> var a =" global a"; Function fun() {var b = "b"; console.log(b); } fun(); Var c = "global c"; console.log(window.c); function fun3() { function fun4() { console.log(c); } fun4(); } fun3(); </script> </head> <body> </body> </html>Copy the code

Effect screenshot:

Variables and functions are declared earlier

Variable declarations are advanced:

Variables declared with the var keyword are declared but not assigned before all code execution.

Assignment is not executed until the code to which it is assigned is executed.

If the var keyword is not used to declare variables, there is no pre-declaration feature.

Function declaration ahead of time:

Functions created using function declarations are created before all code is executed,

So we can call the function before it’s declared.

Functions created using function expressions do not have this feature, so they cannot be called before they are created.

Sample code:

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> console.log("a = "+a); var a = 10; fun(); Function fun(){console.log(" I am fun "); }; Var fun2 = function(){console.log(" I am a fun2 function "); }; fun(); fun2(); </script> </head> <body> </body> </html>Copy the code

Effect screenshot:

The comment opening for fun2() above is an error because fun2 has not been declared there and cannot be called.

Writing is not easy, read if it helps you, thank you for your support!

If you are a computer terminal, see the lower right corner of the “one button three links”, yes click it [ha ha]

Come on!

Work together!

Keafmd