javascript的函数

作者：F.Permadi
译者：Sheneyan(子乌)
时间：2006.01.03
英文原文：INTRODUCTIONTOJavaScriptFunctions
中文译文(包括示例)：javascript的函数
子乌注：一篇相当不错的function入门文章，个人感觉相当经典。

词语翻译列表
function:函数（Function未翻译）
declare:定义
assign:指派，分配
functionbody:函数体（就是函数的内容）
object:对象
property:属性
unnamed:匿名（在这里没翻译成未命名）
objectorientedprogramming:面相对相编程
class:类（比如后面的classdatatype我翻译成类数据类型）
pointer:指针
reassign:重新分配
nest:嵌套
feature:功能，特性
local/global:局部/全局
blueprint:蓝图（？）
userdefined:用户自定义
instance:实例
prototype:原型（除了标题都不翻译）
internal:内部
constructor:构造器
duplication:

函数：定义

　　有以下这些方法可以定义一个函数。所有这些都是有效的，但是它们在后台如何实现的则有一些差别。

　　一般大家都用这个写法来定义一个函数：


[Copytoclipboard]CODE:
functionName([parameters]){functionBody};

ExampleD1：


[Copytoclipboard]CODE:
functionadd(a,b)
{
returna+b;
}
alert(add(1,2));//结果3

　　当我们这么定义函数的时候，函数内容会被编译（但不会立即执行，除非我们去调用它）。而且，也许你不知道，当这个函数创建的时候有一个同名的对象也被创建。就我们的例子来说，我们现在有一个对象叫做“add”（要更深入了解，看底下函数：对象节。）
　　我们也可以通过指派一个变量名给匿名函数的方式来定义它。

ExampleD2


[Copytoclipboard]CODE:
varadd=function(a,b)
{
returna+b;
}
alert(add(1,2));//结果3

　　这个代码和前一个例子做了同样的事情。也许语法看起来比较奇怪，但它应该更能让你感觉到函数是一个对象，而且我们只是为这个对指派了一个名称。可以把它看做和varmyVar=[1,2,3]一样的语句。以这种方式声明的函数内容也一样会被编译。
　　当我们指派一个这样的函数的时候，我们并不一定要求必须是匿名函数。在这里，我作了和ExampleD2一样的事情，但我加了函数名“theAdd”，而且我可以通过调用函数名或者是那个变量来引用函数。

ExampleD2A


[Copytoclipboard]CODE:
varadd=functiontheAdd(a,b)
{
returna+b;
}
alert(add(1,2));//结果3
alert(theAdd(1,2));//结果也是3

　　使用这种方式来定义函数在面向对象编程中是很有用的，因为我们能像底下这样使一个函数成为一个对象的属性。


[Copytoclipboard]CODE:
varmyObject=newObject();
myObject.add=function(a,b){returna+b};
//myObject现在有一个叫做“add”的属性（或方法）
//而且我能够象下面这样使用它
myObject.add(1,2);

　　我们也能够通过使用运算符new来定义一个函数。这是一个最少见的定义函数的方式并且并不推荐使用这种方式除非有特殊的理由（可能的理由见下）。语法如下：


[Copytoclipboard]CODE:
varName=newFunction([param1Name,param2Name,...paramNName],functionBody);

ExampleD3:


[Copytoclipboard]CODE:
varadd=newFunction(a,b,returna+b;);
alert(add(3,4));//结果7

　　我在这里有两个参数叫做a和b，而函数体返回a和b的和。请注意newFunction(...)使用了大写F，而不是小写f。这就告诉javascript，我们将要创建一个类型是Function的对象。还要注意到，参数名和函数体都是作为字符串而被传递。我们可以随心所欲的增加参数，javascript知道函数体会是右括号前的最后一个字符串（如果没有参数，你能够只写函数体）。你没必要将所有东西都写在一行里（使用\或者使用字符串连接符+来分隔长代码）。\标记告诉JavaScript在下一行查找字符串的其余部分。例子如下：

ExampleD4


[Copytoclipboard]CODE:
//注意+
//和\的不同用法
varadd=newFunction(a,b,
alert+
(adding+a+and+b);\
returna+b;);
alert(add(3,4));//结果7

　　采用这种方式定义函数会导致函数并没被编译，而且它有可能会比用其它方式定义的函数要慢。至于为什么，看一下这个代码：

ExampleD5


[Copytoclipboard]CODE:
functioncreateMyFunction(myOperator)
{
returnnewFunction(a,b,returna+myOperator+b;);
}

varadd=createMyFunction(+);//创建函数add
varsubtract=createMyFunction(-);//创建函数subtract
varmultiply=createMyFunction(*);//创建函数multiply
//testthefunctions
alert(加的结果=+add(10,2));//结果是12
alert(减的结果=+subtract(10,2));//结果是8
alert(乘的结果=+multiply(10,2));//结果是20
alert(add);

　　这个有趣的例子创建了三个不同的function，通过实时传递不同的参数来创建一个新Function。因为编译器没法知道最终代码会是什么样子的，所以newFunction(...)的内容不会被编译。那这有什么好处呢？嗯，举个例子，如果你需要用户能够创建他们自己的函数的时候这个功能也许很有用，比如在游戏里。我们也许需要允许用户添加“行为”给一个“player”。但是，再说一次，一般情况下，我们应该避免使用这种形式，除非有一个特殊的目的。


函数：对象
　　函数是javascript中的一种特殊形式的对象。它是第一个[b〕类数据类型（classdatatype）。这意味着我们能够给它增加属性。这里有一些需要注意的有趣观点：

　　就像刚才提及的，当我们定义一个函数时，javascript实际上在后台为你创建了一个对象。这个对象的名称就是函数名本身。这个对象的类型是function。在下面的例子，我们也许不会意识到这一点，但我们实际上已经创建了一个对象：它叫做Ball。

Example1


[Copytoclipboard]CODE:
functionBall()//也许看起来有点奇怪，但是这个声明
{//创建了一个叫做Ball的对象
i=1;
}
alert(typeofBall);//结果function

　　我们甚至能将这个对象的内容打印出来而且它会输出这个函数的实际代码，Example2:点击alert(Ball);来看看Ball的内容。
　　我们能够添加给Object添加属性，包括对象function。因为定义一个函数的实质是创建一个对象。我们能够“暗地里”给函数添加属性。比如，我们这里定义了函数Ball，并添加属性callsign。


[Copytoclipboard]CODE:
functionBall()//也许看起来有点奇怪，但是这个声明
{//创建了一个叫做Ball的对象，而且你能够
}//引用它或者象下面那样给它增加属性
Ball.callsign=TheBall;//给Ball增加属性
alert(Ball.callsign);//输出TheBall

　　因为function是一个对象，我们能够为一个function分配一个指针。如下例，变量ptr指向了对象myFunction。


[Copytoclipboard]CODE:
functionmyFunction(message)
{
alert(message);
}
varptr=myFunction;//ptr指向了myFunction
ptr(hello);//这句会执行myFunction：输出hello

　　我们能够运行这个函数，就好像这个函数名已经被指针名代替了一样。所以在上面，这行ptr(hello);和myFunction(hello);的意义是一样的。
　　指向函数的指针在面向对象编程中相当有用。例如：当我们有多个对象指向同一个函数的时候（如下）：

Example4A


[Copytoclipboard]CODE:
functionsayName(name)
{
alert(name);
}
varobject1=newObject();//创建三个对象
varobject2=newObject();
varobject3=newObject();
object1.sayMyName=sayName;//将这个函数指派给所有对象
object2.sayMyName=sayName;
object3.sayMyName=sayName;

object1.sayMyName(object1);//输出object1
object2.sayMyName(object2);//输出object2
object3.sayMyName(object3);//输出object3



　　因为只有指针被保存（而不是函数本身），当我们改变函数对象自身的时候，所有指向那个函数的指针都会发生变化。我们能够在底下看到：

Example5:


[Copytoclipboard]CODE:
functionmyFunction()
{
}
myFunction.message=old;
varptr1=myFunction;//ptr1指向myFunction
varptr2=myFunction;//ptr2也指向myFunction

ptr1();//输出old
ptr2();//输出old

myFunction.message=new;

ptr1();//输出new
ptr2();//输出new

　　我们能够在一个函数创建之后重新分配它，但是我们需要指向函数对象本身，而不是指向它的指针。在下例中，我将改变myfunction()的内容。

Example6:


[Copytoclipboard]CODE:
functionmyFunction()
{
alert(Old);
}
myFunction();//输出Old
myFunction=function()
{
alert(New);
};
myFunction();//输出New

　　旧函数哪里去了？？被抛弃了。


　　如果我们需要保留它，我们可以在改变它之前给它分配一个指针。

Example6A:


[Copytoclipboard]CODE:
functionmyFunction()
{
alert(Old);
}
varsavedFuncion=myFunction;
myFunction=function()
{
alert(New);
};
myFunction();//输出New
savedFuncion();//输出Old



　　不过要小心，象下面这样的例子并不会有作用，因为是创建了另一个叫做myFunctionPtr的函数而不是修改它。

Example6B:


[Copytoclipboard]CODE:
functionmyFunction()
{
alert(Old);
}
varsavedFunc=myFunction;
savedFunc=function()
{
alert(New);
};
myFunction();//输出Old
savedFunc();//输出New

　　我们还能够在一个函数中嵌套一个函数。下例，我有一个叫做getHalfOf的函数,而在它里面，我有另一个叫做calculate的函数。

Example7


[Copytoclipboard]CODE:
functiongetHalfOf(num1,num2,num3)
{
functioncalculate(number)
{
returnnumber/2;
}

varresult=;
result+=calculate(num1)+;
result+=calculate(num2)+;
result+=calculate(num3);
returnresult;
}
varresultString=getHalfOf(10,20,30);
alert(resultString);//输出51015

　　你只能在内部调用嵌套的函数。就是说，你不能这么调用：getHalfOf.calculate(10)，因为calculate只有当外部函数(getHalfOf())在运行的时候才会存在。这和我们前面的讨论一致（函数会被编译，但只有当你去调用它的时候才会执行）。
　　你也许正在想命名冲突的问题。比如，下面哪一个叫做calculate的函数会被调用？

Example8


[Copytoclipboard]CODE:
functioncalculate(number)
{
returnnumber/3;
}

functiongetHalfOf(num1,num2,num3)
{
functioncalculate(number)
{
returnnumber/2;
}

varresult=;
result+=calculate(num1)+;
result+=calculate(num2)+;
result+=calculate(num3);
returnresult;
}
varresultString=getHalfOf(10,20,30);
alert(resultString);//输出51015

　　在这个例子中，编译器会首先搜索局部内存地址，所以它会使用内嵌的calculate函数。如果我们删除了这个内嵌（局部）的calculate函数,这个代码会使用全局的calculate函数。

函数：数据类型及构造函数

　　让我们来看看函数的另一个特殊功能－－这让它和其它对象类型截然不同。一个函数能够用来作为一个数据类型的蓝图。这个特性通常被用在面向对象编程中来模拟用户自定义数据类型(userdefineddatatype)。使用用户自定义数据类型创建的对象通常被成为用户自定义对象(userdefinedobject)。

　　在定义了一个函数之后，我们也同时创建了一个新的数据类型。这个数据类型能够用来创建一个新对象。下例，我创建了一个叫做Ball的新数据类型。

ExampleDT1


[Copytoclipboard]CODE:
functionBall()
{
}
varball0=newBall();//ball0现在指向一个新对象

alert(ball0);//输出Object，因为ball0现在是一个对象

　　这样看来，ball0=newBall()作了什么？new关键字创建了一个类型是Object的新对象（叫做ball0）。然后它会执行Ball()，并将这个引用传给ball0（用于调用对象）。下面，你会看到这条消息：“creatingnewBall”，如果Ball()实际上被运行的话。

ExampleDT2


[Copytoclipboard]CODE:
functionBall(message)
{
alert(message);
}
varball0=newBall(creatingnewBall);//创建对象并输出消息
alert(ball0.name);//输出ball-0

　　我们可以把上面这段代码的第6行看做是底下的代码6-8行的一个简写：


[Copytoclipboard]CODE:
functionBall(message)
{
alert(message);
}
varball0=newObject();
ball0.construct(creatingnewball);//执行ball0.Ball(creating..);
ball0.name=ball-0;
alert(ball0.name);

　　这行代码ball0.construct=Ball和Example4中的ptr=myFunction语法一致。
　　如果你还是不明白这行的含义那就回过头再复习一下Example4。注意：你也许考虑直接运行ball0.Ball(...)，但是它不会起作用的，因为ball0并没有一个叫做Ball(...)的属性，并且它也不知道你究竟想作些什么。
　　当我们象上面那样使用关键字new创建一个对象的时候，一个新的Object被创建了。我们可以在创建之后给这个对象添加属性（就好像我在上面那样添加属性name。而接下来的问题就是如果我们创建了这个对象的另外一个实例，我们得象下面那样再次给这个新对象添加这个属性。）

ExampleDT3(creates3ballobjects)


[Copytoclipboard]CODE:
functionBall()
{
}
varball0=newBall();//ball0现在指向了类型Ball的一个新实例
ball0.name=ball-0;//ball0现在有一个属性name

varball1=newBall();
ball1.name=ball-1;

varball2=newBall();

alert(ball0.name);//输出ball-0
alert(ball1.name);//输出ball-1
alert(ball2.name);//哦，我忘记给ball2添加“name”了！

　　我忘记给ball2添加属性name了，如果在正式的程序中这也许会引发问题。有什么好办法可以自动增加属性呢？嗯，有一个：使用this关键字。this这个词在function中有特别的意义。它指向了调用函数的那个对象。让我们看看下面的另一个示例，这时候我们在构造函数中添加上这些属性：

ExampleDT4


[Copytoclipboard]CODE:
functionBall(message,specifiedName)
{
alert(message);
this.name=specifiedName;
}
varball0=newBall(creatingnewBall,SoccerBall);
alert(ball0.name);//printsSoccerBall

　　请记住：是new关键字最终使得构造函数被执行。在这个例子中，它将会运行Ball(creatingnewBall,SoccerBall);而关键字this将指向ball0。
　　因此，这行：this.name=specifiedName变成了ball0.name=SoccerBall。
　　它主要是说：给ball0添加属性name，属性值是SoccerBall。
　　我们现在只是添加了一个name属性给ball0，看起来和上一个例子中所做的很象，但却是一个更好更具扩展性的方法。现在，我们可以随心所欲的创建许多带有属性的ball而无需我们手动添加它们。而且，人们也希望创建的Ball对象能够清晰的看懂它的构造函数并且能够轻松找出Ball的所有属性。让我们添加更多属性到Ball里。

ExampleDT5


[Copytoclipboard]CODE:
functionBall(color,specifiedName,owner,weight)
{
this.name=specifiedName;
this.color=color;
this.owner=owner;
this.weight=weight;
}
varball0=newBall(black/white,SoccerBall,John,20);
varball1=newBall(gray,BowlingBall,John,30);
varball2=newBall(yellow,GolfBall,John,55);
varballoon=newBall(red,Balloon,Pete,10);

alert(ball0.name);//输出SoccerBall
alert(balloon.name);//输出Balloon
alert(ball2.weight);//输出55

　　嘿！使用面向对象术语，你能够说Ball是一个拥有如下属性的对象类型：name,color,owner,weight。
　　我们并没被限制只能添加形如字符串或者数字之类的简单数据类型作为属性。我们也能够将对象赋给属性。下面，supervisor是Employee的一个属性.

ExampleDT6


[Copytoclipboard]CODE:
functionEmployee(name,salary,mySupervisor)
{
this.name=name;
this.salary=salary;
this.supervisor=mySupervisor;
}
varboss=newEmployee(John,200);

varmanager=newEmployee(Joan,50,boss);
varteamLeader=newEmployee(Rose,50,boss);

alert(manager.supervisor.name+isthesupervisorof+manager.name);
alert(manager.name+\ssupervisoris+manager.supervisor.name);

　　会输出什么呢？
　　就像你在上面这个例子中看到的那样，manager和teamLeader都有一个supervisor属性，而这个属性是类型Employee的一个对象。
　　任何类型的对象都可以作为一个属性，回忆一下前面的Example4(不是ExampleDT4)，函数也是一个对象。所以你可以让一个函数作为一个对象的一个属性。下面，我将添加两个函数getSalary和addSalary。

ExampleDT7


[Copytoclipboard]CODE:
functionEmployee(name,salary)
{
this.name=name;
this.salary=salary;

this.addSalary=addSalaryFunction;

this.getSalary=function()
{
returnthis.salary;
};
}
functionaddSalaryFunction(addition)
{
this.salary=this.salary+addition;
}

varboss=newEmployee(John,200000);
boss.addSalary(10000);//boss长了10K工资……为什么老板工资可以长这么多:(
alert(boss.getSalary());//输出210K……为什么默认工资也那么高……:(

　　addSalary和getSalary演示了几种将函数赋给属性的不同方法。如果你记得我们最开始的讨论；我讨论了三种声明函数的不同方式。所有那些在这里都是适用的，但是上面展示的两个最常用。
　　让我们看看有什么不同。下面，注意一下9-12行的代码。当这部分代码执行的时候，函数getSalary被声明。如前面数次提到的，一个函数声明的结果是一个对象被创建。所以这时候boss被创建（接下来的第19行），而boss里有一个getSalary属性。


[Copytoclipboard]CODE:
functionEmployee(name,salary)
{
this.name=name;
this.salary=salary;

this.addSalary=addSalaryFunction;

this.getSalary=function()
{
returnthis.salary;
};
}
functionaddSalaryFunction(addition)
{
this.salary=this.salary+addition;
}

varboss=newEmployee(John,200000);
varboss2=newEmployee(Joan,200000);
varboss3=newEmployee(Kim,200000);


　　当你创建这个对象的更多实例时(boss2和boss3),每一个实例都有一份getSalary代码的单独拷贝；而与此相反，addSalary则指向了同一个地方(即addSalaryFunction)。

　　看看下面的代码来理解一下上面所描述的内容。

ExampleDT8


[Copytoclipboard]CODE:
functionEmployee(name,salary)
{
this.name=name;
this.salary=salary;

this.addSalary=addSalaryFunction;
this.getSalary=function()
{
returnthis.salary;
};
}
functionaddSalaryFunction(addition)
{
this.salary=this.salary+addition;
}

varboss1=newEmployee(John,200000);
varboss2=newEmployee(Joan,200000);


//给getSalary函数对象添加属性
boss1.getSalary.owner=boss1;
boss2.getSalary.owner=boss2;
alert(boss1.getSalary.owner);//输出boss1
alert(boss2.getSalary.owner);//输出boss2
//如果两个对象指向同一个函数对象，那么
//上面两个输出都应该是“boss2”。

//给addSalary函数对象添加属性
boss1.addSalary.owner=boss1;
boss1.addSalary.owner=boss2;
alert(boss1.addSalary.owner);//输出boss2
alert(boss2.addSalary.owner);//输出boss2
//因为两个对象都指向同一个函数，（子乌注：原文写arenotpointingtothesamefunction，疑为笔误）
//当修改其中一个的时候，会影响所有的实例（所以两个都输出“boss2”）.


　　也许不是重要的事情，但这里有一些关于运行类似上面的getSalary的内嵌函数的结论：1)需要更多的存储空间来存储对象（因为每一个对象实例都会有它自己的getSalary代码拷贝）；2)javascript需要更多时间来构造这个对象。
　　让我们重新写这个示例来让它更有效率些。

ExampleDT9


[Copytoclipboard]CODE:
functionEmployee(name,salary)
{
this.name=name;
this.salary=salary;

this.addSalary=addSalaryFunction;
this.getSalary=getSalaryFunction;
}
functiongetSalaryFunction()
{
returnthis.salary;
}

functionaddSalaryFunction(addition)
{
this.salary=this.salary+addition;
}

　　看这儿，两个函数都指向同一个地方，这将会节约空间和缩短构造时间（特别是当你有一大堆内嵌函数在一个构造函数的时候）。这里有另外一个函数的功能能够来提升这个设计，它叫做prototype，而我们将在下一节讨论它。

函数：原型
　　每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译，使用其原文)。这个属性非常有用：为一个特定类声明通用的变量或者函数。

　　你不需要显式地声明一个prototype属性，因为在每一个构造函数中都有它的存在。你可以看看下面的例子：

ExamplePT1


[Copytoclipboard]CODE:
functionTest()
{
}
alert(Test.prototype);//输出Object

　　就如你在上面所看到的，prototype是一个对象，因此，你能够给它添加属性。你添加给prototype的属性将会成为使用这个构造函数创建的对象的通用属性。
　　例如，我下面有一个数据类型Fish，我想让所有的鱼都有这些属性：livesIn=water和price=20；为了实现这个，我可以给构造函数Fish的prototype添加那些属性。

ExamplePT2


[Copytoclipboard]CODE:
functionFish(name,color)
{
this.name=name;
this.color=color;
}
Fish.prototype.livesIn=water;
Fish.prototype.price=20;

　　接下来让我们作几条鱼：


[Copytoclipboard]CODE:
varfish1=newFish(mackarel,gray);
varfish2=newFish(goldfish,orange);
varfish3=newFish(salmon,white);

　　再来看看鱼都有哪些属性：


[Copytoclipboard]CODE:
for(vari=1;i<=3;i++)
{
varfish=eval(fish+i);//我只是取得指向这条鱼的指针
alert(fish.name+,+fish.color+,+fish.livesIn+,+fish.price);
}

　　输出应该是：


[Copytoclipboard]CODE:
mackarel,gray,water,20
goldfish,orange,water,20
salmon,whitewater,20

　　你看到所有的鱼都有属性livesIn和price,我们甚至都没有为每一条不同的鱼特别声明这些属性。这时因为当一个对象被创建时，这个构造函数将会把它的属性prototype赋给新对象的内部属性__proto__。这个__proto__被这个对象用来查找它的属性。
　　你也可以通过prototype来给所有对象添加共用的函数。这有一个好处：你不需要每次在构造一个对象的时候创建并初始化这个函数。为了解释这一点，让我们重新来看ExampleDT9并使用prototype来重写它：

ExamplePT3


[Copytoclipboard]CODE:
functionEmployee(name,salary)
{
this.name=name;
this.salary=salary;
}
Employee.prototype.getSalary=functiongetSalaryFunction()
{
returnthis.salary;
}

Employee.prototype.addSalary=functionaddSalaryFunction(addition)
{
this.salary=this.salary+addition;
}

　　我们可以象通常那样创建对象：


[Copytoclipboard]CODE:
varboss1=newEmployee(Joan,200000);
varboss2=newEmployee(Kim,100000);
varboss3=newEmployee(Sam,150000);

　　并验证它：


[Copytoclipboard]CODE:
alert(boss1.getSalary());//输出200000
alert(boss2.getSalary());//输出100000
alert(boss3.getSalary());//输出150000

　　这里有一个图示来说明prototype是如何工作的。这个对象的每一个实例(boss1,boss2,boss3)都有一个内部属性叫做__proto__，这个属性指向了它的构造器(Employee)的属性prototype。当你执行getSalary或者addSalary的时候，这个对象会在它的__proto__找到并执行这个代码。注意这点：这里并没有代码的复制(和ExampleDT8的图表作一下对比)。