JavaScript基本介绍02-Array对象、自定义对象、原型

你的名字 2022-04-24 00:34 230阅读 0赞

**补充：**  
事件编程中事件的分类：  
1.鼠标点击事件：单击：onclick / 双击：ondbclick  
2.和焦点相关的事件：聚焦事件：onfocus / 失去焦点事件：onblur  
3.选项卡发生变化的事件：onchange事件  
4.鼠标经过 / 移出事件：onmouseover / onmouseout  
5.页面加载事件：body中的内容加载完毕之后会执行的事件 onload

### js之Array对象 ###

js中定义数组注意事项：  
1.在js中定义数组，不用担心数组越界问题，会自动扩容；  
2.在js中，数组是可以定义任何数据类型的;

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>Array对象</title>
    		<script>
    		/*1.指定数组长度 var arr = new Array(3);*/
    		//需要给数组中的元素进行赋值
    		
    		/*2.不指定数组长度 var arr = new Array();*/
    		
    		/*3.指定具体元素内容*/
    		 var strArray = ["java","python","c++"];
    		
    		 //两个方法
    		 //1.join（str）：通过指定字符串，将数组中的内容用该字符串拼接
    		 //2.reverse（）：将数组中的内容进行反转
    		var str = strArray.join("-");
    		 document.write(str);
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

### js自定义对象 ###

*  有参方式：类似于java中的有参构造
    
        function 对象（形参）{
            	追加属性
             	  追加方法
            }
            创建对象：var 对象名 = new 对象（实参）；
 *  2.无参构造：类似于java中的参数构造
    
        function 对象（）{
           	
           }
           创建对象
           var 对象名 = new 对象（）；
           追加属性
           追加方法
 *  创建Object对象：在js中Object对象代表了所有对象，是一个模板对象
    
        var p = new Object;
        //追加属性
        p.name = "susan";
        p.age = 18;
        //追加方法
        p.say = function(){
        	alert("调用了say方法");
        	}
 *  字面量的方式：json格式
    
        var p ={
        	"key1":"value1";
        	"name":"susan";
        	"age":"18";
        	//追加方法
        	"say":function(){
        		alert("调用了say方法");
        	}
        	...
        };

练习：  
需求：  
设计一个工具对象ArrayUtil-  
添加一个search（array，target）-在array数组中查找target元素的位置；  
添加max（array）：获取最大值

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>js自定义对象</title>
    		<script src = "ArrayUtil.js"></script>
    		<script>
    			//定义一个数组
    			var arr = [8,67,15,65,98,10];
    			var arrayUtil = new ArrayUtil();
    			var index = arrayUtil.search(arr,15);
    			document.write("15的位置是"+index+"<br/>");
    			var max = arrayUtil.max(arr);
    			document.write("最大值是"+max+"<br/>");
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

js文件中：

### js原型 ###

js原型属性的作用：  
1.在js中所有的内置对象中，都存在原型属性：prototype；  
2.在内置对象中调用原型属性，追加一个方法，这个方法会自动添加到内置对象中；  
3.原型的作用就是为了给内置对象中追加方法  
格式：  
`内置对象.prototype.方法名 = function（参数）{...}`

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>js原型</title>
    		
    		<script>
    			Array.prototype.search = function(target){ 
    				for(var i = 0;i<this.length;i++){ 
    					if(this[i] == target){ 
    						return i;
    					}
    				}
    				return -1;
    			}
    			
    			Array.prototype.max = function(){ 
    				var max = this[0];
    				for(var i = 1;i<this.length;i++){ 
    					if(this[i]>max){ 
    						max = this[i]; 
    					}
    				}
    				return max;
    			}
    			
    			var arr = [8,67,15,65,98,10];
    			var index = arr.search(15)
    			document.write("15的位置是"+index+"<br/>");
    			var max = arr.max();
    			document.write("最大值是"+max+"<br/>");	
    		</script>
    	</head>
    	<body>
    	</body>
    </html>