JS function foundation

Function function
Function encapsulation, direct call, code reuse rate is improved

definition

  1. Function declaration
function Function name(parameter list ){
	//Function body
}
  1. Function expression
var Function name=function(parameter list ){
	//Function body
}

Formal parameters and arguments correspond one-to-one
Function name. length: number of formal parameters

Function and variable declaration promotion
Like variables, function declarations are promoted. The promotion of function declarations takes precedence over that of variables
You can call a function before a function declaration
Note: functions created using function expressions are not declared ascending, so they cannot be called before declarations.

console.log(test);//[Function:test] function declaration promotion
function test(){
	console.log(a);//undefined variable declaration promotion
	var a=1;
	console.log(a);//1
}
test();

function call
The declared function will not be executed. It can only be executed by calling. It can be called multiple times
Syntax: function name (argument);
Function name. Call (execution environment object, argument list);
Function name. Apply (execution environment object, argument list array);
Arguments can be any data type
It can be a function or an object (when there are multiple parameters, the parameters can be encapsulated into an object, and any error can be reduced by passing through the object)

//Object as a function argument
function person(o){
    console.log("My name is"+o.name+','+'this year'+o.age+'Years old'+','+'come from'+o.from);
}
var obj={
    name:'zs',
    age:20,
    from:'Beijing'
}
person(obj);//The argument is obj, which is passed to the function
//My name is zs. I'm 20 years old. I'm from Beijing

Return value
Syntax: return return value;
The return value can be any type of data or an object / function
The return statement will return undefined if it is not followed by any value or if return is not written
The statements after return are not executed

//Function as the return value:
function f1(){
    function f2(){
        console.log('hello');
    }
    return f2;//Take f2 function as return value
}
var a=f1();//Assigning the return value of f1 to a is equivalent to assigning f2 function to a,a=f2;
a();//hello is equivalent to f2();
console.log(a);//[Function:f2]
f1()();//hello ditto; f1()=f2,f1()()=f2()

Difference between function name and function name ()

function test(){
	console.log("hello");
}
var result1=test;	//Function object, which is equivalent to directly assigning function object to result
console.log(result1); //[Function:test]
var result2=test();	//hello calls the function and assigns the execution result of the function to result
console.log(result2); //Undefined if there is no return, undefined is returned

arguments
Function internal properties
Is a class array object that contains the parameters passed into the function. Its main purpose is to save the parameters of the function
The arguments object also has a callee attribute that points to the function that owns the arguments object.
Function external: the arguments save the original data
Inside the function: arguments holds the real arguments

this
What is this: every time the parser calls a function, it will pass an implicit parameter to the function. This implicit parameter is this, which points to an object.

  1. Use this alone, global
    Browser: window object
    node environment: global objects
  2. In function:
    This will point to different objects according to different function calling methods (the owner of the function is bound to this by default)
    ① In ordinary functions, this is window/global
    ② When a function is called as a method of an object by the object, this is the object
    ③ In the constructor, this points to the instance returned by the constructor
  3. this in the event
    In the HTML event handle, this points to the HTML element that receives the event

Change this point:
        Function name. Call (specified this object, argument list);
        Function name. Apply (specified this object argument list array);

Scope
The scope of a variable.

  1. Global scope: window/global
    Variables in the global scope are global variables that can be accessed in any part of the page
    The created variables are saved as properties of the window/global object
    The created function is saved as a method of the window/global object
    Variables declared without var in functions become global variables
  2. Function (local) scope: function
    The function scope is created when the function is called. After the function is executed, the function scope is destroyed
    Each time a function is called, a new function scope is created, which are independent of each other
    The formal parameter of the function is equivalent to declaring this variable in the function scope
//Exercise 1
var a=123;
function fun(){
	console.log(a);
	a=456; //If there is no local, then a=456 changes the value of global a
}
fun(); //123 there is no a locally, find the global a=123
console.log(a); //456  

//Exercise 2
var a=123;
function fun(a){ //The formal parameter a is equivalent to declaring a in the function
	console.log(a); //a only declares that there is no assignment
	a=456; //If a is declared in the function, here is the assignment to a of the function
}
fun(); //undefined  
console.log(a); //123global a has not changed

Tags: Javascript

Posted on Sat, 04 Sep 2021 23:21:23 -0400 by Restless