Introduction to JavaScript Function function types
- 2020-05-27 04:13:12
- OfStack
// in JS, the Function(function) type is actually an object; Each function is an instance of type Function; Both have properties and methods like other reference types 1;
// since the function is an object, the function name is actually a pointer to the function object.
1. How functions are declared
1. Function declaration mode
function box(num1,num2){
return num1+num2;
}
2. A function expression defines a function
var box = function(num1,num2){ // Through the variable box Referable function ;
return num1+num2;
}; // Notice at the end of the function 1 A semicolon , Just like when you declare other variables 1 sample ;
var another = box; // Using a function name without parentheses is an access function pointer ; Instead of calling a function ;
console.log(another(10,10));
3. use Function The constructor
var box = new Function('num1','num2','return num1+num2');
// The first 3 This method is not recommended , This syntax causes the code to be parsed twice ( The first 1 Subanalytic routine JS code , The first 2 Subparse the string passed in the constructor ), And that affects performance ;
// It can be understood through this grammar " Functions are objects , The function name is a pointer " The concept of ;
2 as a function of the value
// JS The name of the function itself is a variable , So functions can also be used as values ;
// That is to say, , Not only can you pass parameters like this 1 The sample 1 You pass it to the other one 1 A function , And you can put 1 Let's say I have two functions 1 Returns the result of four functions ;
function box(sumFunction,num){ // No matter the first 1 What function is passed in ,
return sumFunction(num); // It's going to go back to performing number one 1 The result after the parameter ;
}
function sum(num){
return num+10;
}
// Transfer the function to another 1 In the function ;
// To access a pointer to a function without executing the function , The parentheses after the function name must be removed ;
var result = box(sum,10); // =>20;
3 function internal properties
// Inside the function there are two special objects :arguments and this;
// 1.arguments: is 1 An array of class objects , Contains all the parameters of the incoming function , The main purpose is to save function parameters ;
// arguments This object also has 1 A named callee The properties of the , This property is 1 A pointer to the , Point to have this arguments Function of an object ;
function box(num){
if(num<=1){
return 1;
}else{
return num*arguments.callee(num-1); // use arguments.callee To perform the box itself ;
}
}
// 2.this: The object on which the function operates is referred to , Or the scope of the function call statement ;
// When a function is called in the global scope ,this That's what the object refers to window;
window.color = "red";
alert(this.color); // Print global color;=>red;
var box = {
color:'blue',
sayColor:function(){
alert(this.color); // Print local color;=>blue;
}
};
Function properties and methods
// JS Is an object , So functions also have properties and methods ; contains length and prototype;
// length attribute : Represents the number of named parameters the function expects to receive ;
function box(name,age){
alert(name+age);
}
alert(box.length); // 2s
// prototype attribute : It is where all the instance methods are really stored , That's the prototype ;
// prototype There are two methods :apply() and call(), Each function contains these two non-inherited methods ;
// The purpose of both methods is to call functions in a specific scope , It's actually the body of the setup function this The value of the object ;
var color = 'red';
var box = {
color = 'blue';
}
function sayColor({
alert(this.color);
});
sayColor(); // Scope in window;
sayColor.call(this); // Scope in window;
sayColor.call(window); // Scope in window;
sayColor.call(box); // Scope in box, Object to pretend to be ;=>red;
// use call(box) Method time ,sayColor() The runtime environment for the method has become box Objects in the ;
// use call() or apply() To maximize the benefits of extending the scope , That is, the object does not need to have any coupling with the method ;
// coupling : It means related to each other , There is a chain reaction between expansion and maintenance ;
// That is to say, ,box The objects and sayColor() There are no redundant associated operations between methods , Such as :box.sayColor = sayColor;
function Animal(){
this.name = "Animal";
this.showName = function(){
alert(this.name);
}
}
function Cat(){
this.name = "Cat";
}
var animal = new Animal();
var cat = new Cat();
// through call or apply Method, will originally belong to Animal The object's showName() Method to the object cat To use.
// The input result is "Cat"
animal.showName.call(cat,",");
//animal.showName.apply(cat,[]);
5 subtotal
The 1 // function is actually an instance of type Function, so the function is also an object. And this 1 point is the most distinctive part of JavaScript;
2 // because of the function object, the function also has methods, which can be used to enhance its behavior;