JS foundation 10

Function addition

1. Self calling function

(function(){ 
    
           console.log(' Self calling function ');
// The result is from calling the function 
       })()

effect ： Form an independent scope space , Variables defined in space are private , It won't pollute the outside
2.arguments All argument sets , It's a pseudo array
There's a length Property determines the number of arguments

 function fun(){ 
    
           console.log(arguments);
// result Arguments [10, callee: ƒ, Symbol(Symbol.iterator): ƒ] 
       }
       fun(10)

2. this keyword

 var obj={ 
    
           fu: function(){ 
    
                console.log(this);
// The object points to obj
           }
       }
       obj.fu() divEle=document.querySelector('div') divEle.οnclick=function(){ 
    
           console.log(this);
// The event object points to the event object            
       }
        function fun(){ 
    
           console.log(this);
// The global definition function points to window
       }
       fun() (function(){ 
    
           console.log(this);
// The self calling function points to window
       })() setTimeout(function(){ 
    
           console.log(this);
       },0)
// The timer function points to window       

3. change this Point to

• function .call( Point to a new object )
• function .call( Point to a new object , Parameters 1, Parameters 2)
• function .apply( Point to a new object )
• function .apply( Point to a new object ,[ Parameters 1, Parameters 2])
• var New functions = function .bind( Point to a new object ) New functions （ Parameters ）

<script> var obj={ 
    
          name:' Xiao Ming '
      }
      var obj2={ 
    
        name:' floret '
      }
      var obj3={ 
    
          name:' Xiaohua '
      }
     function test(a,b){ 
    
        console.log(this);
        console.log(a);
        console.log(b);
      }
      test(1,2) //window 1 2 test.call(obj,1,2) //{ 
    name: ' Xiao Ming '} 1 2 test.apply(obj2,[1,2]) //{ 
    name: ' floret '} 1 2 var test2=test.bind(obj3) test2(1,2) //{ 
    name: ' Xiaohua '} 1 2       
    </script>

4. Arrow function
   Definition ： The short form of a function

<script> function fun(){ 
    }
// It can't be abbreviated  const fun=function(){ 
    }; // It can be abbreviated  const obj={ 
    
    fun:function(){ 
    }
// It can be abbreviated  
   }
    </script>

Abbreviated form of arrow function

<script> divEle=document.querySelector('div') divEle.οnclick=function(e){ 
    
       console.log(' Test abbreviation ');
    }
// Parentheses can be abbreviated when there is only one parameter  divEle.οnclick=e=>{ 
    
     console.log(' Test abbreviation ');
    }
// Only one line of code can abbreviate curly braces , Automatic addition return return     
    divEle.οnclick=e=>console.log(' Test abbreviation ')
        
    
    </script>

5. Deconstruct assignment
   notes ：object use {},array use []

let obj={ 
    
       name:'jack',
       age:18,
       sex:' male '
   }
 let{ 
    name,age}=obj let obj1={ 
    arr:[1,2]}
   let [a,b]=obj1.arr

application ：

<script>
// Exchange two numbers 
   let a=10,
       b=20;
    [a,b]=[b,a]
    console.log('a='+a+'b='+b);
// result a=20b=10 // Functions generally return only one value , Multiple values can be returned by deconstruction method  function fun(){ 
    
        return [1,2,3]
    }
    var [a,b,c]=fun()
    console.log(a b c);
// result 1,2,3 // When passing parameters, deconstruction can be used to pass in... Out of order  function person({ 
    name,age}){ 
    
        console.log(' I am a '+name+' Age '+age);
// As a result, I was jack Age 19 
    }
    person({ 
    age:19,name:'jack'}) // Deconstruction assignment can quickly take out the values in the array  var arry=[10,20,30] var { 
    
        0:first,
        2:last
    }=arry
    console.log(first);
// result 10
</script>

Expand operator …

<script>
// Expand array 
    let arry=[1,2,3]
    console.log(...arry);
// result 1 2 3

// Expand the array and splice 
    let arr=[1,2,3]
    let arr2=[...arr,4]
    console.log(arr2);
//[1,2,3,4] // Expand the object and splice  let obj={ 
    
        name:'jack',
        age:19
    }
    let obj1={ 
    
        ...obj,
        sex:' male '
    }
    console.log(obj1);
// result { 
    name:'jack',age:19,sex:' male '}
</script>