程序员社区

JS基础10

函数补充

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

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

 function fun(){
           console.log(arguments);
//结果Arguments [10, callee: ƒ, Symbol(Symbol.iterator): ƒ] 
       }
       fun(10)
  1. 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       
  1. 改变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>
  1. 箭头函数
    定义:函数的简写形式
<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>
  1. 解构赋值
    注: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>

赞(0) 打赏
未经允许不得转载:IDEA激活码 » JS基础10

相关推荐

  • 暂无文章

一个分享Java & Python知识的社区