JS-函数深入

BBBuild~

已于 2023-04-04 10:13:25 修改

阅读量72

点赞数

分类专栏：前端文章标签： javascript

于 2023-03-22 10:19:30 首次发布

本文链接：https://blog.csdn.net/gogaogao/article/details/129689499

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

function 它是一条数据【工具包】

如果直接执行这个变量名，那么它会返回自己；
每个函数都有一个自己的默认的return值：undefined；
函数的return，只要一看到return后面都不走了；
window只是环境，不是函数；

 function a(){
   	return;
   }
   console.log(a);
   console.log(a());

在这里插入图片描述

var allInput=document.getElementsByTagName('input');
    function show(leo){
    	return function(){
    		console.log(leo);
    	}
    }; 
    for (var i = 0; i < allInput.length; i++) {
    	allInput[i].onclick=show(i);//0,1,2
    }

一、函数的声明方式

弱类型的声明方式，可以任意调用

// 弱类型的声明方式，可以任意调用
function a(){  };

强类型的声明方式，只能在下面调用

//强类型的声明方式，只能在下面调用
var a=function(){   };

二、报错的两种方式

编写型错误自己的原因写错了之前都会执行
编译型错误都不会执行

三、匿名函数

(function( ){ })( );
(function( ){ }( ));
~function( ){ }( ); =>return -(x)-1

四、Arguments 不定参

Arguments对象不是一个Array。它类似于Array，但除了length属性和索引元素之外没有任何Array属性。
任何函数里面都有arguments

	function leo(){
		var oNode=document.createElement(arguments[0]);
		oNode.innerHTML=arguments[1];
		oNode.style.background=arguments[2];
        oNode.style.width=arguments[3];
        oNode.style.height=arguments[4];
        document.body.appendChild(oNode);
	};
	leo('div','我现在用的是arguments','red','500px','300px');

二、函数的递归使用

递归是函数一种自己间接调用给自己使用的方式

    var i=0;
    function leo(){
    	i++;
    	console.log(i);
    	//延时异步
    	setTimeout(leo,1000);
    };
    leo();

  function sky(){
    	document.body.style.background='grey';
    	setTimeout(leo,1000);
    };
    function leo(){
    	document.body.style.background='white';
    	setTimeout(sky,500);
    };
    leo();

三、函数的return用法

return语句会终止函数的执行并返回函数的值
任何函数都有默认的return值 undefined
函数的return值可以被打印或者alert看到的

alert(alert(10));//10  undefined

四、函数的封装

<head>
	<title></title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			background: #ccc;
			display: none; 
		}
		div.show{
			display: block;
		}
		.active{
			background:red; 
		}
	</style>
</head>
<body>
   <input type="button" name="" value="aa" class="active">
   <input type="button" name="" value="bb">
   <input type="button" name="" value="cc">
   <div class="show">我是第一个div</div>
   <div class="">我是第二个div</div>
   <div class="">我是第三个div</div>
</body>
<script type="text/javascript">
	var allInput=document.getElementsByTagName('input');
	var allDiv=document.getElementsByTagName('div');
	
	for (var i=0;i<allInput.length;i++){
		allInput[i].setAttribute('index',i);
        allInput[i].onclick=function(){
        	for(var i=0;i<allInput.length;i++){
        		allInput[i].className='';
        		allDiv[i].className='';
        	};
        	this.className='active';
        	allDiv[this.getAttribute('index')].className='show';
        }
	}

</script>

for (var i=0;i<allInput.length;i++){
	    allInput[i].index=i;
        allInput[i].onclick=function(){
        	for(var i=0;i<allInput.length;i++){
        		allInput[i].className='';
        		allDiv[i].className='';
        	};
        	this.className='active';
        	allDiv[this.index].className='show';
        }
	}

<style type="text/css">
		.outNode div{
			width: 200px;
			height: 200px;
			background: #ccc;
			display: none; 
		}
        span,input{
        	cursor: pointer;
        	margin-left:10px; 
        }
        .toActive{
        	background: red;
        }
		.outNode .show{
			display: block;
		}
</style>

<script type="text/javascript">
  //封装一个选项卡
    function CreateTab(obj){	
    	var outNode=document.createElement('div');
    	outNode.className='outNode';
    	document.body.appendChild(outNode);
    	
    	for (var i = 0;i <obj.topValue.length; i++) {
    		var topNode=document.createElement(obj.topNode);
    		if (i==0) {
    			topNode.className=obj.topClass;
    		};
    		if(obj.topNode=='input'){
    			topNode.type='button';
    			topNode.value=obj.topValue[i];
    		}else{
    			topNode.innerHTML=obj.topValue[i];
    		}
    		outNode.appendChild(topNode);
    	}
        
    	for (var i = 0;i <obj.bottomValue.length; i++) {
    		var bottomNode=document.createElement(obj.bottomNode);
    		if (i==0) {
    			bottomNode.className=obj.bottomClass;
    		}
    		bottomNode.innerHTML=obj.bottomValue[i];
    		outNode.appendChild(bottomNode);
    	}

       var allTop=outNode.getElementsByTagName(obj.topNode);
       var allBottom=outNode.getElementsByTagName(obj.bottomNode);
       for (var i = 0;i<allTop.length; i++) {
          allTop[i].index=i;
          allTop[i].onclick=function(){
          	for (var i = 0;i<allTop.length; i++) {
          		allTop[i].className='';
          		allBottom[i].className='';
          	}
            this.className=obj.topClass;
            allBottom[this.index].className=obj.bottomClass;
          }
       }
    };

  //调用
    CreateTab({
        topNode:'span',
		bottomNode:'div',
		topValue:['昨天','今天','明天','后天'],
		bottomValue:['昨天开心','今天很开心','明天超开心','后天特开心'],
		topClass:'toActive', 
		bottomClass:'show'
     })

     CreateTab({
        topNode:'input',
		bottomNode:'div',
		topValue:['ww','ee','ff','tt'],
		bottomValue:['昨天22开心','今天很33开心','明天超55开心','后天特66开心'],
		topClass:'toActive', 
		bottomClass:'show'
     })

</script>