现在的位置: 首页 > 综合 > 正文

16、JavaScript对象模型及Function对象

2018年02月05日 ⁄ 综合 ⁄ 共 2981字 ⁄ 字号 评论关闭

1、在Javascript中,函数(function)就是对象,在JavaScript中没有方法(函数)重载的概念。

看下面的例子:

<html>
	<head>
		<script type="text/javascript">
			
		function add(number)
		{
			alert(number + 20);
		}
		function add(number,number1)
		{
			alert(number + 30);
		}
		add(10);

		</script>
	</head>

	<body>
	
	</body>

</html>

运行结果为弹出一个窗口,显示40,如果我们将两个函数位置调到,如下:

<html>
	<head>
		<script type="text/javascript">
			
		function add(number,number1)
		{
			alert(number + 30);
		}	
		function add(number)
		{
			alert(number + 20);
		}
		
		add(10);

		</script>
	</head>

	<body>
	
	</body>
</html>

结果为30,谁写在后面谁起作用了,是不是后面的覆盖了前面的???,当然不是。

在Javascript中,函数(function)就是对象,在JavaScript中没有方法(函数)重载的概念。

对于上面的函数,等价于如下:

<html>
	<head>
		<script type="text/javascript">
			
	
		function add(number)
		{
			alert(number + 20);
		}
		
		var add = function(number)
		{
		alert(number + 20);
		}

		function add(number,number1)
		{
			alert(number + 30);
		}
		
		var add = function(number,number1)
		{
			alert(number + 30);
		}

		add(10);

		</script>
	</head>

	<body>
	
	</body>
</html>

add相当于一个引用变量,开始指向function(number)对象,然后右指向function(number,number1),function(number)此后将在无法访问到了,内存图如下:

在很多js框架中,函数的定义一般使用var add = function(){  }的形式

2、程序如下:

<html>
	<head>
		<script type="text/javascript">
			
	
		function add(number)
		{
			alert(number + 20);
		}
		
		add(10,20);

		</script>
	</head>

	<body>
	
	</body>
</html>

结果还是30,并且无错误提示,javascript函数对于参数来说多了就舍弃,少了,少了的参数就是Undefined类型参数,对参数数量没有严格要求

<html>
	<head>
		<script type="text/javascript">
			
	
		function add(number)
		{
			alert(number + 20);
		}
		/*
		var add = function(number)
		{
		alert(number + 20);
		}
		*/
		function add(number,number1)
		{
			alert(number);
			alert(number1);
		}
		/*
		var add = function(number,number1)
		{
			alert(number + 30);
		}
		*/
		add(10,20);
		add(10);	

		</script>
	</head>

	<body>
	
	</body>
</html>

上述程序,add(10,20)显示两个警告窗口,分别是10,20,add(10)也显示两个警告窗口,分别是10和undefined,undefined是Undefined类型的

3、在JavaScript中有一个Function对象,所有自定义的函数都是Function对象类型的

使用Function定义函数:

<html>
	<head>
		<script type="text/javascript">
			
		var add = new Function("number","alert(number + 20);");
		add(20);
	
		</script>
	</head>

	<body>
	
	</body>
</html>

new Function()中的参数,前面几个是正常的参数,最后一个是函数体的内容

<html>
	<head>
		<script type="text/javascript">
			
		var add = new Function("number","alert(number + 20);");
		add(20);
		var add2 = new Function("number","number1","alert(number + number1);");
		add2(10,20);
	
		</script>
	</head>

	<body>
	
	</body>
</html>

add和add2相当于:

function add(number)
{
 alert(number +20);
}

function add2(number,number1)
{
 alert(number + number1);
}

Function对象接收的所有参数都是字符串类型的,其中最后一个参数就是要执行的函数体,而前面的参数则是函数真正需要接收的参数

4、在JavaScript中,每个函数都有一个隐含的对象arguments,表示给函数实际传递的参数。arguments有一个属性length表示实际传递参数的个数。

<html>
	<head>
		<script type="text/javascript">
			
		function add(number1,number2)
		{
			alert("实际参数个数:" + arguments.length);
			alert(arguments[0]);
			alert(arguments[1]);
			alert(arguments[2]);

		}

		add(2,3,4);
	
		</script>
	</head>

	<body>
	
	</body>
</html>

定义的add函数接收两个参数,实际调用时传递了3个,使用arguments对象可以打印出全部传递过来的参数。,结果显示为

实际参数个数:3   然后是2 、3 、4

模拟函数重载的例子:

<html>
	<head>
		<script type="text/javascript">
			
		function add(number1,number2)
		{
			alert(arguments.length);
			alert(arguments[0]);
			alert(arguments[1]);
			alert(arguments[2]);

		}

		//add(2,3,4);
		
		function add2()
		{
			if(1 == arguments.length)
			{
				alert(arguments[0]);
			}
			else if(2 == arguments.length)
			{
				alert(arguments[0] + arguments[1]);
			}
			else if(3 == arguments.length)
			{
				alert(arguments[0] + arguments[1] + arguments[2]);	
			}
		}
		
		add2(3);
		add2(3,4);
		add2(3,4,5);
		</script>
	</head>

	<body>
	
	</body>
</html>

5、

 

 

抱歉!评论已关闭.