Function is the most commonly used concept in JavaScript. Function in JavaScript is the easiest function to get started, but it is also the most difficult concept to understand and master in JavaScript.
1. Function type is one of the reference types in js. Each function is actually an instance object of Function type, with its own properties and methods. Because of the functional object, the function name is actually a pointer to the function object.
2. Commonly used function definition methods
1. Function declaration:
function sum(a , b ){
return a+b;
}
2. Expression:
var sum = function(){
return a+b;
}; //Note the semicolon //The difference between the two methods: //The interpreter will be the first to read the function declaration and make it accessible before execution. When using an expression, you must wait until the parser executes to the line of code where it is located before it will be truly interpreted and executed (the variable declaration is advanced, and the value remains in place)alert (sum (10 ,10));
function sum(a ,b){
return a+b;
}
//↑The above code will be executed normally, because before the code is executed, the parser will improve through function declarations, read and add function declarations to the execution environment, and place them at the top of the code treealert (typeof sum);
alert(sum(10 , 10));
var sum = function (a ,b){
return a+b;
}
//↑Report an error，The reason is that the function is in an initialization statement，Not a function declaration，Will not be advanced，And onlyvar sumin advance，usetypeofOperator displaysumyesundefined，所以Report an error
3. The function name only holds a pointer to a function object, so the function name is no different from other variables containing the object pointer, that is, a function object can have multiple names:
function sum(a , b ){
return a+b;
}
(sum(2 ,3)); //5
var anotherSum = sum; //The variable anotherSum also points to the same function object(anotherSum(4 , 5)); //9
sum = null; //The sum variable no longer saves pointers to the function object(anotherSum(1 , 3)); //anotherSumThis variable can still be called
4. Why does JS not overload the concept.
function add(a){
return a+3 ;
}
function add(a){
return a+5;
}
var result = add(3); //8
//The two functions have the same name，The result can only be the next function overwrites the previous one，So it cannot be reloaded
5. Internal properties of a function: inside the function, there are two special objects, arguments and this
1. arguments：
arguments is an array object of the class, containing all parameters of the passed function. This object has an attribute called callee. The attribute value is a pointer, pointing to the function itself that owns the arguments object.
function foo (){
var a =;
return ();
}
foo();
/*
Return result:
"function sum(){
var a =;
return ();
}"
In other words, inside a function refers to the function itself. This function is somewhat useful when called recursively, has many flaws, and is removed in ES5 strict mode
*/
2. this: Simply put, this refers to the environment object in which the function executes. This refers to the object in which the object is executed. It's quite complicated to expand, just one article
//TODO:
3. ES5 specifies another property of a function: caller. This function property refers to the function that calls the current function.
function inner(){
();
}
function outer(){
inner();
}
outer();
//function outer(){
inner();
}
4. length attribute: indicates the number of parameters the function wants to accept
function add(a ,b ,c){
return a+b+c;
}
; //3
5. The famous prototype attribute, simply put, is an object, an object created by calling a constructor, containing properties and methods that can be shared by all instances of a specific type. It's quite complicated to expand, just one article
//TODO：
6. Two methods of the function: call() and apply(). They both call the function in a specific scope, and in fact they are set this value inside the function.
1. call(): Similar to the apply() method, the difference is that the method of receiving parameters is different, and the parameters must be listed one by one.
2. apply(): receives two parameters, one is the scope of the function operation, and the other is an array of parameters, which can be an array or an array object of the arguments class.
function sum(a , b){
return a+b;
}
function callSum(a , b){
return (this , arguments);
}//The second parameter is an array object argumentsfunction callSum1(a , b){
return (this, [a , b]);
} //The second parameter is an array(callSum(2 , 3)); //5
(callSum1(3 ,5)); //8
3. Passing parameters and calling functions is not where call() and apply() come in. The real powerful thing about the expansion function operation scope
var color = 'red';
var obj = {
color :'blue'
}
function foo(){
();
}
foo(); //'red'
(this);//'red'
(obj); //'blue'
//Last callfoo()The execution environment of the function has changed，Among themthisPointed toobjObject，So it's'blue'
The biggest advantage of using call() and apply() to expand scope is to decouple objects and methods.
4. ES5 defines a new method: bind(), which returns a function, in which this value will be bound to the value passed to bind() function.
var x = 9;
var module = {
x: 81,
getX: function() { return ; }
};
(); // 81
var retrieveX = ;
retrieveX(); // 9, because in this case, "this" points to the global variablevar boundGetX = (module);//Bind this in the retrieveX() function with the module forever, and then call this function, it will always run in the module objectboundGetX(); // 81
The above is an in-depth analysis of the Function types in JavaScript introduced by the editor. I hope it will be helpful to you. If you want to know more, please stay tuned.