20180302JS的深入学习：函数的深入用法、函数的参数、JS内置对象、动态时钟及验证表单的练习、JS原型链的简单了解

本文链接：https://blog.csdn.net/cjl_xupt/article/details/79462720

一、函数的深入用法

1.将函数赋给一个变量：

2.将函数赋给对象的属性

3.将函数作为参数传递给另一个函数（高阶函数）

该方式的作用能够实现JS的动态调用函数，在调用highFunc()函数时，只需改变函数参数F即可实现该方法的动态调用一个其他函数。

4.将函数作为返回值

注意：外层函数的返回值是整个内层函数，不是内层函数的返回值，对于一个外层函数outer(),内层函数的返回值只有一个，且不会因外层函数的作用而导致返回值的改变。

由第四点可以引出JS中一个十分重要的概念：闭包，“闭包”指的是内层函数可以储存外层函数的局部变量或返回值。

当然，闭包的内层函数也是只能保存一个值的。

在这一块本人理解也不够深刻，话说的也不明白这里举一个比较坑的例子，很明显的表达了我上面话的意思。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>闭包的应用</title>
	<script type="text/javascript">
	    var array=[]; //定义一个空数组
	    function outer(){
	    	var a=["apple","banana","orange","watermelon"]; //在函数中定义一个长度为4的数组
            for(var i=0;i<a.length;i++){
            	var x={}; //每次循环创建一个x对象
            	x.index=i; //x对象有属性index
            	x.name=a[i]; //有name属性
            	x.func=function (){ //func属性值为一个内层函数
                    alert(i);
            	};
            	//x.func();
            	array.push(x); //将x属性放入定义的array数组中
            }
	    }

	    outer();	 /*调用outer函数,注意，此时outer函数只被调用了一次，如我前面所说，outer的内层函数最终只会有一个返回值，
		意思是只保存了一个outer函数局部变量i的值，因此i的值不言而喻。*/
		 for(var j=0;j<array.length;j++){
	    	array[j].func();
	    }
	</script>
</head>
<body>
	
</body>
</html>

解释都在如上代码的注释里边，这里只是看出了闭包的一个简单例子，其中奥秘还需深入挖掘。

二、函数的参数(argumens对象)

JavaScript中传递给函数的参数是通过arguments对象来保存，该对象并不显示给出,arguments对象保存的是传递的实参内容，arguments对象有length属性，可以根据此属性得知实际调用时传递参数的个数，也可以用过下标操作符来获取arguments中的元素。

三、JavaScript内置对象

1.String(注意：这个可不是JS数据类型中的string)

常用属性：length:返回字符串的长度;

常用方法:

toUpperCase()、toLowerCase():将当前调用此方法的字符串变为大写/小写;

indexOf("子字符串"):返回子字符串在当前字符串中第一次出现的位置；

lastIndexOf("子字符串"):返回子字符串在当前字符串中最后一次出现的位置;

charAt("charIndex"):返回指定字符在字符串中第一次出现的位置;

substring(begingIndex):截取从beginIndex到字符串末尾的子字符串

substring(beginIndex,endIndex):截取[beginIndex,endIndex)区间内的值(看好了，是左闭右开区间);

2.Math内置对象

常用属性：PI（圆周率）;

常用方法：

Math.random():获取[0.0,1.0)区间内的随机数;

Math.ceil()/floor():向上取整/向下取整;

Math.sqrt():求某数的平方根;

Math.pow(a,b):求a的b次幂;

Math.round():四舍五入;

3.Array内置对象

声明数组的方式：var 数组名=[元素1，元素2，元素3，...];

JS数组的特性：

1).可以存储不同数据类型的元素;

2).数组长度可变;

3).数组索引可以是数字，也可以是字符串，注：数组索引为字符串时不算进数组长度里面，即如果用for循环遍历数组时以字符串为索引的元素不会被访问到，因此用for...in语法糖遍历含字符串索引的数组更为合适;但是以字符串作为索引的字符串仍属于数组的一部分，这些元素总是位于索引最大值的元素之后;

4).数组的属性length可以变化;

5).JS中数组还有方法：

push(元素)：将指定元素添加到数组中; 注：给数组添加元素的另一种方式是数组名[索引]=元素值;

pop():弹出一个元素;

用for...in语法糖遍历数组的方式为：

for(var index in array){ alert(array[index]); }

4.Date内置对象

获得Date内置对象：var date = new Date();

常用方法：getFullYear():获取年;

getMonth():获取月;

getDate():获取一个月中的第几天;

getDay():获取一周内的第几天;

getHours():获取时；getMinutes():获取分;getSeconds():获取秒

根据Date内置对象可以再利用JS写一个动态时钟，这里引出了一个系统函数setInterval():能够自身调用自己：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态时钟</title>
	<script type="text/javascript">
	    
        function showTime(){
        	var date=new Date();
        	var year=date.getFullYear();
        	var month=date.getMonth();
        	var day=date.getDate();
        	var hour=date.getHours();
        	var minute=date.getMinutes();
        	var second=date.getSeconds();
        	var div=document.getElementById("clock");
            div.innerHTML="<h5>现在时间是："+year+"-"+(month+1)+"-"+day+" "+hour+":"+minute+":"+second+"</h5>";
        }

        setInterval("showTime()",1000);   // 每隔1秒，定时调用指定函数
        /**
        window.οnlοad=function(){
        	alert("网页加载完毕！");
        }**/

        
	</script>
</head>
<body>
	<div id="clock">div原来默认的文本</div>
</body>
</html>

接下来写一个前台验证表单的练习：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单验证</title>
	<script type="text/javascript">
	     function validate(){
	     	 var username=document.getElementById("uname");
             var pwd=document.getElementById("pwd");
             var email=document.getElementById("email");
             if(username.value==""){
             	 alert("用户名不能为空");
             	 return false;
             }
             if(pwd.value.length<6){
             	 alert("密码不能少于位6位");
             	 return false;
             }
             if(email.value.indexOf("@")==-1){
             	alert("邮箱格式错误！");
             	return false;
             }
             return true;
	     }


	     function tip(){
             var tip=document.getElementById("tip");
             var pwd=document.getElementById("pwd");

             tip.style.color="red";
             if(pwd.value.length<6){
             	  tip.innerHTML="* 密码不能少于位6位！";
             }else{
             	  tip.innerHTML="";
             }             
	     }

	     function changeBackground(){
             var pwd=document.getElementById("pwd");
             pwd.style.backgroundColor="#aabbcc";
	     }

           function showPlaceholder(obj){
             var uname=document.getElementById("uname");
             var pwd=document.getElementById("pwd");
             var email=document.getElementById("email");

             if(obj==uname || obj==pwd || obj==email){
                  obj.setAttribute("placeholder","");
             }
           }


	</script>
</head>
<body>
	<form method="post" action="serverURL" οnsubmit="return validate()">
	    注册用户名：<input type="text" name="username"
	          placeholder="填写注册用户名" id="uname" οnclick="showPlaceholder(this)"/> 
	     <br/> <br/>
	     注册密码：<input type="password" name="pwd" id="pwd" 
	          οnfοcus="changeBackground()" 
	          οnblur="tip()" 
	          placeholder="密码" οnclick="showPlaceholder(this)"/>  
              <span id="tip"></span>

	          <br/> <br/>
	     注册邮箱：<input type="text" name="email" id="email"
	          placeholder="注册邮箱" οnclick="showPlaceholder(this)"/>  <br/> <br/>
	          <input type="submit" value="注册"/>
	</form>
</body>
</html>

四、JS的原型链

JS的每个对象都有一个属性：_proto_ ;

JS函数有两个属性：prototype、_proto_ ;

这里放张图吧：