D 03_JavaScript自定义方法和自定义对象

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #函数 #对象

本文介绍JavaScript中自定义函数和对象的方法，包括函数定义、使用注意事项及对象创建的不同方式，适用于初学者掌握基本编程技巧。

JavaScript自定义方法和自定义对象

自定义函数/自定义方法

2.7.1、函数简述及作用

如果一段代码需要被重复编写使用，那么我们为了方便统一编写使用，可以将其封装进一个函数（方法）中。

作用：增强代码的复用性

2.7.2、函数格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
		<script type="text/javascript">
		/*
		 * 自定义函数的用法
		 * js函数定义必须小写
		 * 参数定义无需定义返回类型,直接在function后面写方法名
		 * 参数定义无需var,一定不要用var否则报错
		 * JavaScript函数体中，return可以不写，也可以return 具体值，或者仅仅写return；
		 * 
		 * js中最后定义的方法会把前面的同名方法覆盖
		 * js中仅用方法名来调用函数,即便形参不匹配,也不影响正常使用
		 * 
		 */
		
		
		function getSum(a,b,c){
			alert(a+"-"+b+"-"+c)
		}
		function getSum(a,b){
			alert(a+"-"+b)
		}
		
		//getSum(1,2);
		
		
		//第二种方式函数定义的	匿名函数
		var sum=function (a,c){
			return a+c;
		}
		
		var result=sum(20,23);
		alert(result);
		
		
		//函数定义第三种
		var ccc=new Function("a","b","return a+b");
		</script>
		
	</head>
	<body>
	</body>
</html>

l JavaScript函数定义必须用小写的function；

l JavaScript函数无需定义返回值类型，直接在function后面书写方法名；

l 参数的定义无需使用var关键字，否则报错；

l JavaScript函数体中，return可以不写，也可以return 具体值，或者仅仅写return；

2.7.3、函数使用的注意事项

JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定，如果未return具体值，返回值为undefined；

JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义；

因为JavaScript不存在函数重载，所以JavaScript仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常调用；

如果形参未赋值，就使用默认值undefined

2.8、自定义对象

2.8.1、function构造函数

我们知道，JavaScript中的引用数据类型都是对象，而对象在JavaScript中可以用函数来表示。

相当于java中创建某个class类

无形参格式：

function 对象名(){

函数体

}

l 带参数格式：

function 对象名(参数列表){

函数体

}

l 有属性格式：

function 对象名(){

this.属性名1=属性值1;

this.属性名2=属性值2;

…….

}

this表示当前对象。

示例1：（this表示的是Person对象）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function Student(){
				this.name="小王";
				this.age="12";
			}
			
			var s=new Student();
			alert(s.age);
			alert(s.name);
			
			function Student(n,a){
				this.name=n;
				this.age=a;
				//在对象中定义一个方法
				this.getSum=function(a,b){
					return a+b;
				}
			}
			
			var s=new Student("老王","55");
			alert(s.age);
			alert(s.name);
			alert(s.getSum(2,3));
			
			
		</script>
	</head>
	<body>
	</body>
</html>

应用场景：适用于对象构建及代码复用。

2.8.2、对象直接量

开发中可以用一种简单的方式直接创建自定义的JavaScript对象，这种方式称为“对象直接量”。

格式：

var 对象名 = {属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……};

注：该方式直接创建出实例对象，无需构建函数，无需再new创建实例对象，直接使用即可

应用场景：适用于快速创建实例对象及数据封装。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
		
		<script type="text/javascript">
		/*
		 * 在直接量中定义方法
		 *  格式   方法名:function(a,b){}
		 */
		var Student={age:"21",name:"大炮",sex:"男",addSum:function(a,b){return a+b;}};
		alert(Student.age+"   "+Student.name+"   "+Student.sex)
		alert(Student.addSum(12,13));
			
			
		var person={name:"小炮",age:"23",sex:"小男人",getSum:function(a,b){return a+b}};
		alert(person.name+"   "+person.sex+"   "+person.getSum(111,111));
		
		</script>
		
	</head>
	<body>
	</body>
</html>