1. Basic knowledge of functions
Through the function can encapsulate any of the statements, call anywhere, JS in the function keyword to declare,
//basic format, function name, pass parameter, code block functionfunctionname (arg0,arg1,arg2,......, ArgN) {statements}//Example functionSayhi (name,message) {Console.log ("Hello" +name+ "," +message)} Sayhi ("Double", "How is You")//normal function name call function functionsum (NUMB1,NUMB2) {returnnumb1+NUMB2; Console.log ("Find me?")//because there was a return before, so no more execution. } var(Result=sum);//declaring a variable to invoke a function functionSumm (NUMB1,NUMB2) {return;//Return can be returned without any return value, undefinedConsole.log ("Hello") } functiondiff (NUMB1,NUMB2) {//a simple comparison function if(numb1<NUMB2) { returnnumb2-NUMB1; } Else{ returnNumb1-NUMB2; } }
1.1 Understanding Parameters
The parameters in JS are represented internally using an array, so no matter the data type of the parameter, the number does not matter, and the parameter is not necessarily used.
The body of the function can access an array of parameters through a arguments object , thus obtaining each parameter. Arguments objects and arrays are similar, can be expressed in brackets, with length;
Parameter names are not required and can be accessed via arguments[0] for convenience.
functionChange () {Console.log (arguments.length)}varZero=change ()//0 can be displayed by length varOne=change ("one")//1 varTwo=change ("Both", 2)//2 //no parameter name functionDoadd () {if(arguments.length==1) {Console.log (arguments[0]+10); }Else if(arguments.length==2) {Console.log (arguments[0]+arguments[1])}} doadd (1)// OneDoadd (ON)//3 //with the name of the parameter functionAnotheradd (num1,num2) {if(arguments.length==1) {Console.log (Num1+10); }Else if(arguments.length==2) {Console.log (Num1+num2)} } anotheradd (1)// OneAnotheradd (ON)//3 functionAgain (num1,num2) {arguments[1]=10; //here the value of num2 becomes 10,arguments and the value of the corresponding named parameter is kept in sync, the memory space is still independent; it is not passed the name parameter is undefinedConsole.log (arguments[0]+num2)}
1.2 No Overloads
The so-called no overload means that the function two is not defined, because the parameters of JS is an array, no signature, do not get the real overload. Two the same function will be the next one, whichever is the other.
function type
are also reference types, each of which is an instance of a function type with the same properties and methods as other reference types. function is an object, so the function name is just a pointer to the function object .
There are two ways of declaring a variable. Let's see an example.
functionSUM (num1,num2) {//function declarations to define functions returnnum1+num2}varsum=function(NUM1,NUM2) {//function expression definition function returnnum1+num2}//The function name is just a pointer, so you can understand that the function described above is not overloaded functionOne (num1,num2) {returnnum1+num2}vartwo= OnevarOne=NULLConsole.log ())//3 Even if one is null
The love between function declaration and function expression is killed
The parser has a different attitude to both of them.
For a function declaration, the parser takes precedence over it and has a function to declare the promotion procedure (function declaration hoisting)
For a function expression, the parser will not take precedence and only read to it to be interpreted.
Console.log (sum) //3 function sum (num1,num2) {return num1+num2 } Console.log (another) //Another is not a function var another=function(num1,num2) { return num1+ Num2 }
Of course, there is a constructor method, not recommended, resulting in two of code parsing, one is regular JS, one is the constructor
That is, the function can be used as a value parameter
function sum (somefunction,value) { // nested return in basic function SomeFunction (value) } function Multiplys (num) { // internal functions return num*num } console.log (sum (Multiplys,2)) // call function, A pointer to an intrinsic function that does not need () to be called
Use as a merit function to sort by an array of attributes
functionCompare (value) {//to compare the properties of obj, the value here is simply an argument, not instantiated, and is instantiated in a simple array . return function(obj1,obj2) {varvalue1=Obj1[value]varValue2=Obj2[value]returnValue1-value2}} varData=[{name: "Double", Age:24},{name: "Zom", Age:23},{name: "Mike", age:32}] Data.sort (compare ("Age") ) Console.log (data)//23,,24,32 to sort
2. Properties inside the function
Within a function, there are typically two objects
This object : This refers to the environment object that the function executes, which is the this value (in the global Environment, this represents window)
arguments Object : Class array object, saving function arguments; There is a callee property, this property is a pointer to a function that has a arguments object
ES5 Specifies the property caller of another function object, holds the function reference that invokes the current function , or null if the current function is called in the global scope
//Recursive Functions functionsum (num) {if(num<=1){ return1 } Else{ returnNum*arguments.callee (num-1)//eliminate tight coupling and ensure that recursive functions are completed, so use the callee property } } varsumm=sum; Sum=NULLConsole.log (Summ (10)) // ThisWindow.color= "Red"functionSaycolor () {Console.log ( This. Color)} Saycolor ()//Red varAnother={color: "Blue"} another.putcolor=saycolor//The function name is just a pointerAnother.putcolor ()//Blue //function Object Properties Caller functionouter () {inner ()} /*function inner () {Console.log (Inner.caller)}*/ functioninner () {Console.log (Arguments.callee.caller)//reduced Coupling} outer ()//outer () function
3. Properties and methods of functions
Each function has two properties
Length Property: Indicates the number of parameter names for the function
Prototype property: Save reference type All instance methods, non-enumerable, cannot be implemented with for-in
Each function contains two non-inherited methods, all of which call the function in a specific scope, and actually equal the value of the this object in the body of the function.
Apply () Method: accepts two parameters, one is the scope in which the function is run, one is a parameter array (an instance of array or a arguments object)
Call () method: The first parameter accepted is the this value does not change, the second is not an array, directly passed to the parameters, see example Bar
functionsum (num1,num2) {returnnum1+num2}functionOnesum (num1,num2) {returnSum.apply ( This, arguments)//arguments Object } functionTwosum (num1,num2) {returnSum.apply ( This, [num1,num2])//Array} console.log (Onesum (The)) Console.log (Twosum (The)) functionThree (num1,num2) {returnSum.call ( This, num1,num2)//parameter Direct delivery} console.log (Three (The)) //the Apply () and call () methods can extend the scope of the functionWindow.color= "Red"varOne={color: "Red"} functionSaycolor () {Console.log ( This. Color)} Saycolor ()//RedSaycolor.call ( This)//RedSaycolor.call (window)//RedSaycolor.call (one)//The scope of blue here is one, no need to put the function into one medium operation
The ES5 rule also specifies a method for bind (), which creates a function instance whose this value is bound to the value passed to the bind () function.
Window.color= "Red" var one={color: "Blue"} function saycolor () { Console.log (this. color) } var another=saycolor.bind (one) ES5 A function method that creates an instance of a function, and the This value of the binding is passed to the function another () //Blue
JS function knowledge