Function_ generalization

1. Defined function

• keyword ：function

• advantage ： Encapsulate the code , Convenient reuse 、 Easy to modify ;

• There are two forms of defining functions

  • [1] Function declaration

    • grammar ： function Function name ( Shape parameter ) { The body of the function }

    • Illustrate with examples

      • function getSum(...rest){
                    
           let sum = 0;
            rest.forEach(item =>{
                    
              sum += item
            })
            return sum
        }
        

  • [2] Function expression

    • grammar ： Variable name = function( Shape parameter ) { The body of the function }

    • Illustrate with examples

      • const getSum2 = function(...rest){
                    
          let sum = 0;
          rest.forEach(item =>{
                    
             sum += item
           })
           return sum
        }
        

• notes ： When defining a function , The code is not running ;

2. Function call

• grammar ： Function name ( Actual parameters )
• effect ： Let the code inside the function body run

3. Function enhancement

• Definition ： Function promotion refers to that Function declaration Promote to the top of the current scope ;

• Be careful ： Function promotion exists only with declared functions , Functions defined with expressions do not have variable promotion ！

  • Illustrate with examples 1

    • console.log(getSum(1,2)) // 3
      function getSum(...rest){
                
         let sum = 0;
          rest.forEach(item =>{
                
            sum += item
          })
          return sum
      }
      console.log(' result ', getSum(1,2,3,4,5,6,7,8,9,10)) // 55
      
      
      /*  Analytic process  var getSum = function(...rest){ let sum = 0; rest.forEach(item =>{ sum += item }) return sum } console.log(getSum(1,2)) console.log(' result ', getSum(1,2,3,4,5,6,7,8,9,10)) // 55 */
      

    • console.log(getSum2(1,2)) // Cannot access 'getSum2' before initialization( It cannot be successfully obtained before initialization getSum2)
      const getSum2 = function(...rest){
                
        let sum = 0;
        rest.forEach(item =>{
                
           sum += item
         })
         return sum
      }
      console.log(getSum2(1,2)) //3
      

• priority ： Function enhancement > Variable Promotion ; If the function name is the same as the variable name , It will not be covered in the process of ascension , But the reassignment will be overwritten ;

  • Illustrate with examples ·

    • console.log(bar);  // function bar() { console.log(123); }
      console.log(bar()); // 123 undefined
      var bar = 456;
      function bar() {
                
        console.log(123); 
      }
      console.log(bar); // 456
      bar = 789;
      console.log(bar); //789
      console.log(bar()) // bar is not a function
      
      /*  Explanation -[1] Function promotion has higher priority than variable promotion , And will not be overwritten by variable promotion in the promotion process  var bar = function() { console.log(123); } var bar console.log(bar); console.log(bar());  Explanation -[2] Variable assignment will overwrite the function  bar = 456; console.log(bar); bar = 789; console.log(bar); console.log(bar()) */
      

4. Arrow function

• Arrow function is a variation of function expression , Syntax is cleaner than arrow functions ;

• Declare the arrow function ：( Shape parameter )=>{ The body of the function }

  • Illustrate with examples

    • //  Function declaration 
      function getSum1(a,b){
                
        return a+b
      }
      //  Arrow function 
      const getSum2 = (a,b)=>{
                 return a+b }
      
      console.log(getSum1(1,2), getSum2(1,2)) // 3 3
      

  • If there is only one formal parameter , It can be omitted ();

    • const getSum2 = a=>{
                 return a }
      

  • If there is only one line of code in the function body , It can be omitted {}; If there is only one line of code in the function body and return, Need to put return Omit together

    • const getSum2 = a=>a 
      

  • If the function returns an object , If you want to omit the outside of the function body {}, You need to add ()

    • const getSum2 = a=>{
                a:a}
      getSum2(1) // undefined
      

    • reason ： When parsing , Will {} It can be resolved as {}, Will not resolve to an object

The difference between arrow function and ordinary function

[1] No function promotion

• Arrow function is a variation of function expression , Function expressions have no function promotion , Arrow function has not improved in winter and summer ;

  • sum(1,2) // Cannot access 'sum' before initialization
    const sum = (a,b)=>{
            
       console.log(a,b)  
    }
    

• Function promotion in progress ： Only functions defined by function declarations have function promotion ;

[2] There is no one's own this

• Arrow function does not have its own this Point to , Its essence is to obtain the upper level through the scope chain this Point to ;

• Illustrate with examples

  • //  The function in the timer is the arrow function ,this Look at the upper level function ->Person Of this Point to -> Point to p
    function Person(){
            
       this.age = 0;
       setInterval(() => {
            
         this.age++; 
         console.log(p.age)//  In turn, increasing 
       }, 1000);
     }
    var p = new Person();
    

  • //  The functions in the timer are function expressions ,this Point to window
    function Person(){
            
      this.age = 0;
      setInterval(function(){
            
        this.age++; 
        console.log(p.age) //  Always for 0
      }, 1000);
    }
    var p = new Person();
    

• Therefore, the arrow function cannot be modified this Point to

  • [1] Use call、apply、bind Method to call a function , The first parameter passed is always ignored ;

    • const obj = {
                
          a:111,
          b:222
      }
      const fun = ()=>{
                
          this.a++
          return this.a
      }
      console.log(fun()) // NaN
      // apply The first parameter of is ignored ,fun In function this Or point to window
      console.log(fun.apply(obj)) // NaN
      

    • const obj = {
                
          a:111,
          b:222
      }
      
      function fun(){
                
          this.a++
          return this.a
      }
      
      console.log(fun()) // NaN
      // apply modify fun Of internal functions this Pointing to obj
      console.log(fun.apply(obj)) // 112
      

  • [2] Arrow function cannot pass new Key word call , Will report a mistake fun is not a constructor

[3] Arrow function has no prototype object

• When each constructor is created, an object corresponding to it will be generated , Called prototype object ;
• Arrow function cannot pass new Key word call ;
  • Arrow function cannot be a constructor ;
    • Arrow function has no prototype object ;

[4] No, arguments

• const fun = ()=>{
        
      console.log('arguments',arguments) //arguments is not defined
  }
  fun()
  

[3] No, super

[4] No, new.target

5. Constructors

• Constructor is a kind of function ;
• Definition ： Use function Keyword definition , Use new The function called by keyword is called constructor
  • If not new Key word call , This function is a normal function ;
  • To distinguish , Constructor function names are generally capitalized ;
• effect ： Constructors can be used to create objects in batches ( Initialize object );

new keyword

• effect ：

  • [1] Open up a space in memory , Create an empty object ;
  • [2] Bind the prototype of the empty object to the prototype of the constructor ;
  • [3] The function's internal this Change the point to the empty object ;
  • [4] The body of the function that executes the constructor , Create related properties and methods ;
  • [5] return this

• Illustrate with examples

  • function Student(name,age,sex){
            
        this.name = name
        this.age = age
        this.sex = sex
    }
    Student.prototype.play=function(){
             console.log(' I like playing with mobile phones ！')}
    const stu1 = new Student('chaochao',18,' Woman ')
    console.log(stu1, stu1.play())