This article describes the use and precautions of javascript function (function type). Share it for your reference, as follows:
In ECMAScript, the Function type is actually an object. Each function is an instance of the Function type and has properties and methods like other reference types. Since a function is an object, the function name is actually a pointer to the function object.
Key points for learning:
1. How to declare functions
2. Function as value
3. Internal properties of the function
4. Function properties and methods
one. How to declare functions
1. Ordinary function declaration
function box(num1, num2) {
return num1+ num2;
}
2. Use variables to initialize the function
var box= function(num1, num2) {
return num1 + num2;
};
3. Use Function constructor
var box= new Function('num1', 'num2' ,'return num1 + num2');
PS: We do not recommend the third method, because this syntax will cause the code to be parsed twice (the first time parsing regular ECMAScript code, and the second time parsing strings passed into the constructor), thereby affecting performance. But we can understand the concept of "function is an object and function name is a pointer" through this syntax.
two. Function as value
The function name in ECMAScript is itself a variable, so functions can also be used as values. That is, not only can one function be passed to another function like passing parameters, but one function can also be returned as the result of another function.
function box(sumFunction, num) {
return sumFunction(num); //someFunction
}
function sum(num) {
return num + 10;
}
var result = box(sum, 10); //Transfer function to another function
three. Function internal properties
Inside the function, there are two special objects:argumentsandthis。argumentsIt is an array object of class that contains all parameters passed in the function. Its main purpose is to save function parameters. But there is another name for this objectcalleeThe property of the property is a pointer that points to own thisargumentsFunctions of the object.
function box(num) {
if (num <= 1) {
return 1;
} else {
return num * box(num-1); //A simple recursion }
}
Recursive algorithms are generally used for factorial functions, so the function will definitely call itself; if the function name is not changed, it is no problem, but once the function name is changed, the internal self-call needs to be modified one by one. To solve this problem, we can useTo replace it.
function box(num) {
if (num <= 1) {
return 1;
} else {
return num * (num-1);//Use callee to execute itself }
}
Another special object inside the function isthis, its behavior is roughly similar to this in Java and C#. in other words,thisIt refers to the object on which the function performs operations, or the scope in which the function call statement is located. PS: When calling a function in a global scope,thisThe object refers to window.
//A rewrite example for easy understanding = 'Red'; //Global, or var color = 'red';alert(); //Print global colorvar box = {
color : 'Blue', //Local color sayColor : function () {
alert(); //At this time, this can only be the color in the box }
};
(); //Print local coloralert(); //It's still global
//Citizen original examples of textbooks = 'Red'; //or var color = 'red'; also OK
var box = {
color : 'Blue'
};
function sayColor() {
alert(); //This is the first time outside, the second time inside the box}
getColor();
= sayColor; //Copy the function into the box object and become a method();
Four. Function properties and methods
Functions in ECMAScript are objects, so functions also have properties and methods. Each function contains two properties:lengthandprototype. Among them, the length attribute represents the number of named parameters that the function wants to receive.
function box(name, age) {
alert(name + age);
}
alert(); //2
PS: ForprototypeProperties, which are the real place to save all instance methods, that is, prototypes. We will introduce this property in detail in the Object Orientation chapter. andprototypeThere are two methods:apply()andcall(), each function contains these two non-inherited methods. Both methods use to call functions in a specific scope, which is actually equivalent to setting the value of this object in the function body.
function box(num1, num2) {
return num1 + num2; //Original function}
function sayBox(num1, num2) {
return (this, [num1, num2]); //this represents scope, here is window} //[] indicates the parameters required by the boxfunction sayBox2(num1, num2) {
return (this, arguments); //The arguments object represents the parameters required by the box}
alert(sayBox(10,10)); //20
alert(sayBox2(10,10)); //20
call()Method inapply()The methods are the same, but the difference is only in the different ways of receiving parameters. forcall()In terms of methods, the first parameter is scope, and there is no change. The change is just that the rest of the parameters are directly passed to the function.
function box(num1, num2) {
return num1 + num2;
}
function callBox(num1, num2) {
return (this, num1, num2); //The difference from apply is the subsequent parameter transmission}
alert(callBox(10,10));
In fact, passing parameters is notapply()andcall()Methods really come into play; they are often used to expand the scope on which functions depend.
var color = 'Red'; //or = 'red';var box = {
color : 'Blue'
};
function sayColor() {
alert();
}
sayColor(); //Scope is in window(this); //Scope is in window(window); //Scope is in window(box); //Scope in box, object impersonation
This example is modified from the previous scope understanding example, we can find that when we usecall(box)When the method is done,sayColor()The running environment of the method has become a box object.
usecall()orapply()The biggest advantage of expanding scope is that the object does not need to have any coupling relationship with the method (coupling means mutual correlation, and expansion and maintenance will have chain reactions). That is, box objects andsayColor()There will be no extra correlation between methods, such as = sayColor;
For more information about JavaScript, please view the special topic of this site: "Summary of common JavaScript functions techniques》、《JavaScript object-oriented tutorial》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques"and"Summary of JavaScript mathematical operations usage》
I hope this article will be helpful to everyone's JavaScript programming.