JS自定义函数

兰色星座

浏览: 10200 次
性别:

最近访客更多访客>>

sunny八带

wd1282988143

qq_anqi

Cobain_LI

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

学习笔记（基础）

javascript

自定义函数
1.定义（3种）

语法1： function 函数名（形式参数列表）{函数体;}

示例：

			function test(a1,a2)
			{
				return a1+a2;
			}

语法2： var 函数名=function（形参列表）{函数体;};

示例：

			var test=function(a1,a2)
			{
				return a1+a2;
			};

语法2： var 函数名=new Function（"参数1","参数2",...,"函数体"）;

示例：

var test= new Function("a1","a2","a3","return a1+a3");

说明：

    a.语法1为function语句；语法2称函数直接量，定义法类似定义变量，最后加上“；”；语法3为Function()构造函数
    b.语法1不允许在同一页面内出现于函数名同名的变量，否则无法执行
    c.语法2允许在同一页面出现于函数名同名的变量，视先后关系决定是否可以执行
    d.形式参数根据需要可有可无
    e.返回值：函数体中通过return关键字返回一个值，如果函数无明确的返回值，或调用了没有参数的 return 语句，那么它真正返回的值是 undefined
    f.Function()构造函数的参数必须是字符串型,最后一个为函数主体（"函数体"），即要执行的代码
2.调用

语法1：

在脚本中使用：函数名（实际参数列表）；
实际参数根据函数定义决定是否需要，形参无则实参不需要

语法2：

通过事件激活：在HTML元素的事件或者a标签的href属性（href="javascript:函数名（）"）中使用
示例：

<body>
	<script type="text/javascript">
			function test(){
				console.debug("hello!")
			}
	</script>
	<input type="button" value="test" onclick="test()">
	<a href="javascript:test()">你好</a>
</body>

3.参数

形式参数：用于定义时，未调用时无值，仅仅是一个占位符

实际参数：用于调用时，将值传递给相应的形式参数，使得形参有意义

JS中并不严格要求函数调用时的实参数量要和定义时的形参数量一致

arguments：

    a.JS内置对象，一个集合类型数据，专门用于存放实参
    b.理论上存放实参的数量仅受内存大小的限制
   c.arguments.length可以获取实参数量
4.变量作用域

全局变量：定义在函数外面，或者在函数内部不定义而直接赋值的变量；可以在任意函数中访问、修改，将所在页面关闭后销毁

局部变量：定义在函数内部，只能在当前函数内访问、修改，函数运行结束，变量自动销毁

在函数内部，如果有一个局部变量和全局变量同名，此时默认访问局部变量（就近原则），如果非要访问全局，必须使用window前缀，在一定条件下也可以使用this前缀

举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS自定义函数</title>
	<script type="text/javascript">
	var a=10;
	function test1(){
		console.debug(++a);
	}
	function test2(){
		var a=20;
		console.debug("全局a："+window.a);
		console.debug("全局a："+this.a);
		console.debug("局部a："+a);
		b=30;//在函数内部直接对变量b进行赋值，而不是通过var进行定义
	}
	function test3(){
		var b=40;
		console.debug("全局b："+window.b);
		console.debug("局部b："+b);
	}
	</script>
</head>
<body>
	<input type="button" value="test1" onclick="test1()">
	<input type="button" value="test2" onclick="test2()">
	<input type="button" value="test3" onclick="test3()">
	<input type="button" value="test4" onclick="test4()">
</body>
</html>

后台运行结果：