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;


Related articles: