谈谈javascript 中的函数问题

聊聊javascript中的函数

本文可作为李刚《疯狂htmlcssjavas讲义》的学习笔记

先说一个题外话前几天在知乎上流传着一个对联

上联是雷锋推到雷峰塔 nnd 这是什么对联?!!!

下联是java implements javascript 笑而不语呵呵

说的javascript的函数了咱们就不妨先说说java里的方法

首先在java里函数(一般叫方法)是从属于类的和容易理解 Person类有个方法叫walk()

但是在javas里面函数是"一等公民" 它可以独立使用同时忘掉java中的类的知识点 javascrpit里的方法就是一个类而且它也只有一个构造方法.

定义函数

先说说定义函数的方法一共有三种

其一

<script type="text/javascript">
	hello('yeeku');
	// 定义函数hello，该函数需要一个参数
	function hello(name)
	{
		alert(name + "，你好");
	}
</script>

很简单吧不过似乎有个问题呀怎么对hello的调用跑到了声明前面去了?

没办法 javascript人家定义了定义了先调用再定义

其二匿名函数

上面那个函数它有名字就叫hello 下面这种方法根本就没有名字

<script type="text/javascript">
	var f = function(name)
	{
		document.writeln('匿名函数<br />');
		document.writeln('你好' + name);
	};
	f('yeeku');
</script>

此时定义的函数它是Function类的一个对象既然是对象那它就可以赋给其他变量

上例中我们把匿名函数赋给了f然后让f直接调用函数 (说实话从java转过来的程序员看javascript很别扭)

其三用Function来定义函数

<script type="text/javascript">
	// 定义匿名函数，并将函数赋给变量f
	var f = new Function('name' ,
		"document.writeln('Function定义的函数<br />');"
		+ "document.writeln('你好' + name);");
	// 通过变量调用匿名函数
	f('yeeku');
</script>

new Function(p1,p2)有两个(组)参数都是字符串第一组存放的是定义的函数用的参数,第二组里面就是函数的内部实现了记住其实就是两个字符串而已.

现在大家看看这三种方式? 哪种好呢?

说实话我自己比较喜欢第一种看着舒服

其实只有初级程序员才喜欢第一种(寒) 因为它多了要给对象

对应第三种方式如果函数体太长那么定义就会显得很臃肿

因此第二种是最常用的

函数方法对象类

其实函数是一个多意词

当我们用上面的方法定义了一个函数的时候就会出现四个概念

函数我们定义了要给函数,它可以被调用

方法在匿名函数里这个函数赋给了一个对象作为它的方法

对象我们定义了一个函数系统也会创建一个对象这个对象是Function类的一个实例

类在定义函数的同时也得到了一个与函数同名的类

看下面的代码

<script type="text/javascript">
	// 定义一个函数
	var test = function(name)
	{
		return "你好，" + name ;
	}
	// 直接调用函数
	var rval = test('leegang');
	// 将函数作为类的构造器
	var obj = new test('leegang');
	alert(rval + "\n" + obj);
</script>

试验结果大家自己复制到记事本里看看

这段代码其实也是示范了两种调用函数的方法

第一种直接调用它就是一个函数 rval得到的是函数的返回值

第二种把他当成一个类 obj得到的就是一个对象

<script type="text/javascript">
	// 定义一个对象
	var p = {
		// 定义一个函数，该函数属于p对象。
		walk: function()
		{
			for(var i = 0 ; i < 2 ; i++)
			{
				document.write("慢慢地走...");
			}
		}
	}
	p.walk();
</script>

说实话这种方式按面向对象的感觉来看还是蛮舒服的对象p有一个函数叫walk

另外在上面的定义函数的方法中

<script type="text/javascript">
	var f = function(name)
	{
		document.writeln('匿名函数<br />');
		document.writeln('你好' + name);
	};
	f('yeeku');
</script>

最后我们是直接调用函数其实和p walk想比较 walk"挂靠"在了p上面而f没有挂靠?真的没有么?

大家试试把f('yeeku');改成window.f('yeeku');

明白了吧其实这个函数如果没有硬性地指定属于某个对象的话就让他属于window

大家试试在p.walk();后面加上window.walk();看看什么情况也就能证明如果一个函数已经属于了一个对象那么她还会不会属于window

函数的调用方式

也是有三种方式

其一直接调用

window.alert(); //当使用window调用方法是 window可省略因此上面的f('yeeku')其实就是window.f('yeeku');

p.walk(); //调用p的对象的walk方法

其二用call方法调用

这样一种情况我们需要让一个函数对数字里面每个元素进行处理代码如下

<script type="text/javascript">
	// 定义一个each函数
	var each = function(array , fn)
	{
		for(var index in array)
		{
			// 以window为调用者来调用fn函数，
			// index、array[index]是传给fn函数的参数
			fn.call(null , index , array[index]);

		}

        document.write("<hr>");
	//常规方式
		for(var index in array)
		{

			// index、array[index]是传给fn函数的参数
			fn(index,array[index]);

		}
	}
	// 调用each函数，第一个参数是数组，第二个参数是函数
	// 4 20 3作为第一个参数
	// 参数就是 下面这个匿名函数
	//function(index , ele)
	//{
	//	document.write("第" + index + "个元素是：" + ele + "<br />");
	//}
	each([4, 20 , 3] , function(index , ele)
	{
		document.write("第" + index + "个元素是：" + ele + "<br />");
	});
</script>

通过上面的例子我们可以看出来

call的使用方法是

函数引用.call(调用者,参数1,参数2..);

和常规调用的对比就是

函数名.call(调用者,参数1,参数2..)=调用者.函数名(参数1,参数2..);

其三用apply方法调用

第三种方法与第二种的区别在于

call必须写清楚每一个参数

apply可以直接传进去要给数组或者用arguments代替

代码如下

<script type="text/javascript">
	// 定义一个函数
	var myfun = function(a , b)
	{
		alert("a的值是：" + a
			+ "\nb的值是：" + b);
	}
	// 以call()方法动态地调用函数
	myfun.call(window , 12 , 23);
	var example = function(num1 , num2)
	{
		// 直接用arguments代表调用example函数时传入的所有参数
		myfun.apply(this, arguments);
	}
	example(20 , 40);
	// 为apply()动态调用传入数组
	myfun.apply(window , [12 , 23]);
</script>