Function:A method with a certain function

The purpose of functions is to implement encapsulation:The reality of a function of the code encapsulated into a function, later to achieve this function, just need to execute the function, do not have to write repeated code, toLow coupling and high cohesion (reduce page redundancy and increase code reuse)We call these characteristicsFunction encapsulation

OOP object-oriented programming, we need to master class inheritance, encapsulation, polymorphism

Function data types also operate on reference addresses

ES3:functionThe function name ([parameter]){function body: implement function js code} function name (); ES6 arrow functions:letFunction name = ([parameter]) =>{function body} function name ();Copy the code
function  fn(){
/ / code
}
fn;   //=> Outputs the function itself
fn(); //=> Function execution

let fn=() = >{

}
fn();
Copy the code

Create a function:

1, create a variable first (declare a function name is the same as declare a variable, if two variable names are repeated will conflict)

2, open a new memory space (assign it a hexadecimal address)

3. Store the js code written in the function body as a “string” in space (so it makes no sense to create a function without executing it)

Function fn(){} var fn=function(){} var fn=function(){} var fn=function(){} var fn=function(){} var fn=function(){} var fn=function(){}

Execute function:

Purpose: To execute code in the function body

Each time a function is executed, the browser creates a new private scope (stack memory) for the code in the function body to execute

2, before executing the code, copy the string that created the function into a real JS expression, which is executed in private scope from top to bottom

A function can be executed N times without interfering with each other, because each execution of the function performs the above steps to recreate the private scope

Arguments in a function

Parameter: is a variable, entry to a function

When we create a function to achieve a certain function, we find that some materials are not clear, only when the function is running, others pass to me, I know, at this time we need to set the entrance, let the user execute through the entrance to give us the value

Parameter default setting

Basic usage
function first(x = 1, y = 2) {
    console.log("x："+x ,"y："+ y);
}
first();		//x: 1 y: 2
first(100);		

Copy the code
2. Combined with the default value of destruct assignment
function second({x, y = 2}) {
    console.log("x："+x ,"y："+ y);
}
second();               TypeError: Cannot destructure property 'x' of 'undefined' or 'null' TypeError: Cannot destructure property 'x' of 'undefined' or 'null'
second({});             //x: undefined y:2
second({x:100});        //x: 100 y:2
second({x:100.y:200});  //x: 100 y:200

Copy the code
Double defaults
function third({x = 1 ,y = 2} = {}) {
    console.log("x："+x ,"y："+ y);
}
third();                //x: 1 y:2
third({x:100.y:200});   //x: 100 y:200
third({x:100});         //x: 100 y:2

// Step resolution
function third(option = {}){   
	let {x=1,y=2}=option 
}
third({x:100.y:200});
Copy the code

Argument: Is a specific value

The arguments are the ** concrete values passed to the function parameters when the function is executed.

The argument must be a value, even if we are writing a variable or expression, we pass the result of the evaluation of the variable or expression as a value to the parameter

/ / parameter
function  fn(num1,num2){
    console.log(num1,num2)
    var total=num1+num2;
    return total;   // Instead of returning the variable total, the value represented by the variable total is returned
}

/ / arguments
fn(10.12); //=> Function execution
var a=16;
fn(a,1= = =1?10:0)
Copy the code

Function return value: function exit

Return: Returns the result of a function (or part of the function body) outside the function

2, return always returns a value (even if return a variable is the value of the variable represented by return)

3. If the function is executed without a return (or return; The function returns undefined on the outside

4, the code after the return is not executed, forcing the end of the function execution

function  fn(num1,num2){
	var total=num1+num2;
	return total;  
}
fn(10.12); / / = > 22
var res=fn(10.12);
console.log(res)  / / 22

//--------------------------------

function  fn(num1,num2){
	var total=num1+num2;
}
var res=fn(10.12);
console.log(res)  //undefined
Copy the code

Arguments: Built-in collection of arguments

Parameters have limitations: we need to know exactly how many arguments are passed when the user executes them, in what order, and so on, before we can define the corresponding entry

Arguments: Is a collection of built-in arguments to a function

Arguments are a built-in mechanism for functions, whether or not you set parameters and whether or not you pass arguments

__proto__ points to Object and __proto__ points to Array; Arguments [0],arguments.length

Even if parameters are set, arguments are always stored as"All"Arguments passed in

Arguments. callee: Stores the current function itself

function sum(n,m){
/* console.log(arguments) {0:10, 1:20, length:2, arguments.callee===sum true} */

	
}
sum(10.20)
Copy the code
// Summation of any number, no matter how many arguments are passed into the function
// iterate over the argument values, summing
// The string is converted to a number during summation. For some non-valid numbers, the sum is not added
function sum(n,m){
	var  total=null;
	for(var i=0; i<arguments.length; i++){var item=arguments[i];
		// Whatever type item is converted to a number
		item=Number(item);
		// only if the current value is a significant number
		isNaN(item)?null:total+=item;
	}
	return total;
}
sum(10.20.30)   / / 60
sum(10.'20'.'aaa')     / / 30
Copy the code

ES6 writing:

let sum=(. arg) = >{
//arg is an array type
	arg=arg.filter(item= > !isNaN(item));
	return eval(arg.join('+'));
}
sum(10.'20'.'aaa')     / / 30

/ / short
let sum=(. arg) = > eval(arg.filter(item= > !isNaN(item)).join('+'));

Copy the code

Real-name functions Anonymous functions

Real-name functions: have function names

function fn(){}Copy the code

Anonymous function: without a function name

Function expression: An event that assigns a function as a value to a variable or element

// Function expression
var fn=function(){

}
oBox.onclick=function(){}Copy the code

Self-executing functions: Creation and execution are done together

// Self-executing function
(function(i)({})10)

~function(){
}()
+function(){} ()!function(){
}()

// -, +, ~! It just makes sense to make the code syntactic
Copy the code