JS function

Define a function

A named function

functionThe function name (Formal parameters1, formal parameter2){statementreturnThe return value}Copy the code

Anonymous functions

let a = function(x, y) (return x + y// Also called function expressionCopy the code

Arrow function

let f1 = x= > x * x
// The left side of the arrow is the input parameter and the right side is the output parameter
let f2 = (x,y) = > x * y
// If there are two arguments, enclose them with ()
let f3 = (x,y) = > {
	console.log('hi')
	return x*y
}
// If there are two statements, the curly braces cannot be separated
let f4 = (x,y) = > ({name:x, age: y})
// To return an object, you must add (), otherwise an error occurs
Copy the code

`fn`and`fn()`The difference between

Fn is the function itself, and fn() calls the function

let fn = () = > console.log('hi') 
let fn2 = fn 
fn2()
//fn saves the address of the anonymous function
// This address is copied to fn2
//fn2 calls an anonymous function
//fn and fn2 are references to anonymous functions
// The real function is neither fn nor fn2.
Copy the code

Elements of a function

Call time

The result of the call is different depending on the timing

let a = 1
function fn(){
  console.log(a)
}
fn()
a = 2
//fn() calls, printing 1
let a = 1
function fn(){
  setTimeout(() = >{
    console.log(a)
  },0)
}
fn()
a = 2
//setTimeout is called after the main process has finished, so 2 is printed.
let i = 0
for(i = 0; i<6; i++){
  setTimeout(() = >{
    console.log(i)
  },0)}// The for loop is finished and then called. The loop does not end until it reaches 6, so print 6 sixes.
for(let i = 0; i<6; i++){
  setTimeout(() = >{
    console.log(i)
  },0)}//JS is used with let and for to print 0,1,2,3,4,5.
Copy the code

Scope and closure

Each function creates a scope by default

If multiple scopes have variable A with the same name, then when searching for the declaration of A, the nearest scope is taken up, referred to as the “proximity principle”. The process of searching for a has nothing to do with the function execution, but the value of a has something to do with the function execution.

function f1(){
  let a = 1
  function f2(){
    let a = 2
    function f3(){
      console.log(a)   // a=22
    }	// If a function uses an external variable, then the function plus the external variable is called a closure. A and F3 form closures
    a = 22
    f3()
  }
  console.log(a)	// a=1
  a = 100
  f2()
}
f1()
Copy the code

Global and local variables

Variables declared in the top-level scope are global variables, window properties are global variables, and everything else is local.

Formal parameters

Formal parameters mean non-actual parameters, which can be thought of as variable declarations, and can have as many or as few formal parameters.

function add(x, y){
  return x+y
}
// where x and y are parameters, since they are not actual arguments
add(1.2)
// When add is called, 1 and 2 are the actual arguments assigned to x and y
Copy the code

The return value

Every function returns a value, and only functions return a value, and only when the function is finished executing.

The return value and print value are different

function hi(){ console.log('hi') }
hi()
// No return, so the return value is undefined
function hi(){ return console.log('hi') }
hi()
// Return the value of console.log('hi'), i.e. undefined, and print the value hi
Copy the code

The call stack

Before calling a function, the JS engine pushes the function’s environment into an array called the call stack. When the function is finished, it pops the environment out, and then returns to the previous environment to continue executing the following code.

Recursive function

function f(n){
  returnn ! = =1 ? n* f(n-1) : 1
}
// Simply put, when f(4)
//f(4)
//= 4 * f(3)
//= 4 * (3 * f(2))
//= 4 * (3 * (2 * f(1)))
//= 4 * (2 * (1)))
//= 4 * (3 * (2))
/ / = 4 * (6)
//24 = 4 * 3 * 2 * 1
// First progress, then return
Copy the code

If too many frames are pushed into the call stack, the program will crash, which is called stack burst.

Function increase

function fn(){}
// No matter where you declare the named function, it will run to the first line.
Copy the code

`arguments`and`this`

Every function except the arrow function.

function fn(){
	console.log(arguments)
    console.log(this)
}
fn.call(1.2.3.4)
Copy the code

thisSpecifies the first element, and when uploadedthisIf it is not an object, then JS is automatically converted to an object.

Arguments specifies the first subsequent element, and arguments is a pseudo-array. Each time a function is called, a corresponding argument is generated. Try not to change elements within Arguments.

Arrow function

Arrow functions are equivalent to anonymous functions and simplify function definitions. Arrow functions come in two formats

var fn = x= > x * x;
// Contain only one expression, return can be omitted
x= > {
    if (x > 0) {
        return x * x;
    }
    else {
        return- x * x; }}// Contains multiple statements. Return cannot be omitted
Copy the code

And there’s no argument or this

Define a function

fnandfn()The difference between