JavaScript functions

Functions in JavaScript:
1) Encapsulate functions
2) Can be called directly
3) The reuse rate of code is improved

1. Function declaration

1. Function declaration

function Function name(parameter list ){
	 //Function body
}

1. Function expression

var Function name = function(parameter list ){
	//Function body
}

Function declarations are similar to var variable declarations and are promoted.

2. Internal properties of function

The property that can be accessed only inside the function. this can also be used outside the function.
arguments
arguments is a class array object that contains all the parameters passed into the function. The main purpose is to save the parameters of the function.
The arguments object has a callee attribute, which is a pointer to the function that owns the arguments object.

//Implement anonymous recursive functions
var sun = function(n){
	if( 1==n ){
		return 1;
	}else{
		return n + aarguments.callee(n-1);
	}
}
console.log(sum(6));  //Output result 21

this
In object-oriented languages, this represents a reference to the current object.

1. Method, this represents the object to which the method belongs
2. Use this alone to point to the global object
   In the browser, window is the global object [object Window]
   In the node environment, it points to an empty object {}
3. Use this in function
   In a function, the owner of the function is bound to this by default
   In the browser, window is the global object [object Window]
   In node, point to the global object
4. this in the event
   In the HTML event handle, this points to the HTML element that receives the event
5. Show data binding
   We can decide the direction of this by ourselves

3. Execute the function immediately

IIFE(Immediately Invoked Function Expression)
effect
1) The setting function is executed only once after the page is loaded
2) Wrap the variables in the setting function in the local scope without revealing the global variables

Writing method

// The first way to write
(function(Formal parameter){
	// Function body content
})(Argument);

// The second way to write
(function(Formal parameter){
	// Function body content
}(Argument));

There are a variety of writing methods, which are not listed here.

Classic case

for (var i = 0; i < 6; i++) {
  function output() {
    console.log(i); // Why do you output 6 instead of 0, 1, 2, 3, 4, 5
    // Because the output i is globally scoped, when the loop ends, the value of i is 6, so the output i is 6.
  }
}
output()
for (var i = 0; i < 6; i++) {
  (function (j) {
    console.log(j); //0,1,2,3,4,5
  })(i)
  // Because the calling function transfer parameters in JS are value passing, so when the function execution is executed immediately, the value of the parameter i is first copied, then the function scope is used to execute the function, and 5 cycles are created to create 5 scopes, so each output is accessed with the value of i of different scopes.
}

Scope (in ES5)

1. Function scope
   Variables declared in JavaScript functions are local variables in functions
   Variables declared inside a function cannot be accessed outside the function
2. global scope
   Variables declared outside the function are global variables
   Variables declared outside the function can also be accessed inside the function
   When a function is nested, the variables of the inner function and the outer function form a closure
3. Scope chain
   1) Free variable:
   There are no variables defined in the current scope
   Value of free variable: find the parent scope that created this function
   2) Scope chain
   When looking for the value of a free variable, what if the parent does not? Look up layer by layer until the global scope is found or not found, and announce to give up. This layer by layer relationship is the scope chain.

*4. Function call

After the function is declared, it will not run directly. It needs to be called to run.
The methods of calling functions are not limited to () execution, but also several other methods

1. Function name (argument list)
2. Function name. Call (execution environment object, argument list)

var obj = {
  name: 'tony',
  sayName: function (a,b) {
    console.log(this.name);
    console.log(a,b); // 1,2
  }
}
var b = obj.sayName;
b.call(obj,1,2); // tony

1. Function name. Apply (execution environment object, argument list array)

var obj = {
  name: 'tony',
  sayName: function (a,b) {
    console.log(this.name);
    console.log(a,b); // 100, 200
  }
}
var b = obj.sayName;
b.apply(obj,[100, 200]); // tony

1. Function name. Bind (execution environment object) (argument list)

var obj = {
  name: 'tony',
  sayName: function () {
    console.log(this.name);
  }
}
var b = obj.sayName;
b.bind(obj); // The code is not printed, which is the difference between bind and call and apply methods. In fact, the bind method returns a modified function.
// Create a new variable c to receive the function modified by bind
var c = b.bind(obj);
console.log(c); // Found that c is a [Function: bound sayName] function
// Executive c
c(); // tony

*5. Closure

A closure is a function that has access to a variable in the scope of another function.

Conditions for generating closures:

1. Function nested function
2. The internal function references the data (property, function) of the external function
3. Parameters and variables are not recycled

The most common way to create closures is to create another function inside one function

function func() {
  var a = 1, b = 2;

  function closure() {
    return a + b;
  }
  return closure;
}
console.log(func()()); // 3

Function of closure:

1. You can read variables inside a function
2. Keep the values of these variables in memory all the time