JS基础10

函数补充

1. 自调用函数

(function(){ 
    
           console.log('自调用函数');
//结果自调用函数
       })()

作用：形成一个独立作用域空间，空间中定义的变量都是私有的，不会对外面进行污染
2.arguments所有实参集合，是个伪数组
里面有个length属性确定实参个数

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

2. this关键字

 var obj={ 
    
           fu: function(){ 
    
                console.log(this);
//对象内部指向obj
           }
       }
       obj.fu() divEle=document.querySelector('div') divEle.οnclick=function(){ 
    
           console.log(this);
//事件对象指向事件对象           
       }
        function fun(){ 
    
           console.log(this);
//全局定义函数指向window
       }
       fun() (function(){ 
    
           console.log(this);
//自调用函数指向window
       })() setTimeout(function(){ 
    
           console.log(this);
       },0)
//定时器函数指向window       

3. 改变this指向

• 函数.call(指向新对象)
• 函数.call(指向新对象，参数1，参数2)
• 函数.apply(指向新对象)
• 函数.apply(指向新对象,[参数1，参数2])
• var 新函数=函数.bind(指向新对象)新函数（参数）

<script> var obj={ 
    
          name:'小明'
      }
      var obj2={ 
    
        name:'小花'
      }
      var obj3={ 
    
          name:'小华'
      }
     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: '小明'} 1 2 test.apply(obj2,[1,2]) //{ 
    name: '小花'} 1 2 var test2=test.bind(obj3) test2(1,2) //{ 
    name: '小华'} 1 2       
    </script>

4. 箭头函数
   定义：函数的简写形式

<script> function fun(){ 
    }
//不能简写 const fun=function(){ 
    }; //可以简写 const obj={ 
    
    fun:function(){ 
    }
//可以简写 
   }
    </script>

箭头函数简写形式

<script> divEle=document.querySelector('div') divEle.οnclick=function(e){ 
    
       console.log('测试简写');
    }
//只有一个参数时可以简写小括号 divEle.οnclick=e=>{ 
    
     console.log('测试简写');
    }
//只有一行代码可以简写花括号，自动添加return返回    
    divEle.οnclick=e=>console.log('测试简写')
        
    
    </script>

5. 解构赋值
   注：object用{}，array用[]

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

应用：

<script>
//交换两个数
   let a=10,
       b=20;
    [a,b]=[b,a]
    console.log('a='+a+'b='+b);
//结果a=20b=10 //函数一般只返回一个值，用解构方法可以返回多个值 function fun(){ 
    
        return [1,2,3]
    }
    var [a,b,c]=fun()
    console.log(a b c);
//结果1，2，3 //传参时用解构可以不按顺序传入 function person({ 
    name,age}){ 
    
        console.log('我是'+name+'年龄'+age);
//结果我是jack年龄19 
    }
    person({ 
    age:19,name:'jack'}) //解构赋值可以快速拿出数组中的值 var arry=[10,20,30] var { 
    
        0:first,
        2:last
    }=arry
    console.log(first);
//结果10
</script>

展开运算符…

<script>
//展开数组
    let arry=[1,2,3]
    console.log(...arry);
//结果1 2 3

//展开数组然后拼接
    let arr=[1,2,3]
    let arr2=[...arr,4]
    console.log(arr2);
//[1,2,3,4] //展开对象然后拼接 let obj={ 
    
        name:'jack',
        age:19
    }
    let obj1={ 
    
        ...obj,
        sex:'男'
    }
    console.log(obj1);
//结果{ 
    name:'jack',age:19，sex:'男'}
</script>