指穷于为薪,火传也,不知其尽也。—《养生主》

Daily English:Experience must be bought.

javascript的函数

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

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

数据类型

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

Example DT1

Language:  Javascript
function Ball()
{
}
var ball0=new Ball(); // ball0 现在指向一个新对象
 
alert(ball0);         // 输出 "Object",因为 ball0 现在是一个对象

运行示例

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

Example DT2

function Ball(message)
{
  alert(message);
}
var ball0=new Ball("creating new Ball");  // 创建对象并输出消息
ball0.name="ball-0";                      // ball0现在有一个属性:name
alert(ball0.name);                        // 输出 "ball-0"

运行示例

我们可以把上面这段代码的高亮的一行看做是底下的代码高亮处的一个简写:

function Ball(message)
{
  alert(message);
}
var ball0=new Object();
ball0.construct=Ball;
ball0.construct("creating new ball");  // 执行 ball0.Ball("creating..");
ball0.name="ball-0";
alert(ball0.name);

运行示例

这行代码ball0.construct=BallExample 4中的ptr=myFunction语法一致。

如果你还是不明白这行的含义那就回过头再复习一下Example 4。注意:你也许考虑直接运行ball0.Ball("..."),但是它不会起作用的,因为ball0并没有一个叫做Ball(“…”)的属性,并且它也不知道你究竟想作些什么。

添加属性

当我们象上面那样使用关键字new创建一个对象的时候,一个新的Object被创建了。我们可以在创建之后给这个对象添加属性(就好像我在上面那样添加属性name。而接下来的问题就是如果我们创建了这个对象的另外一个实例,我们得象下面那样再次给这个新对象添加这个属性。)

Example DT3 (creates 3 ball objects)

Language:  Javascript
function Ball()
{
}
var ball0=new Ball(); // ball0 现在指向了类型Ball的一个新实例
ball0.name="ball-0";  // ball0 现在有一个属性"name"
 
var ball1=new Ball();
ball1.name="ball-1";
 
var ball2=new Ball();
 
alert(ball0.name);    // 输出 "ball-0"
alert(ball1.name);    // 输出 "ball-1"
alert(ball2.name);    // 哦,我忘记给ball2添加“name”了!

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

Example DT4

Language:  Javascript
function Ball(message, specifiedName)
{
  alert(message);
  this.name=specifiedName;                
}
var ball0=new Ball("creating new Ball", "Soccer Ball");  
alert(ball0.name);                   // prints "Soccer Ball"

运行示例

请记住:是new关键字最终使得构造函数被执行。在这个例子中,它将会运行Ball("creating new Ball", "Soccer Ball");而关键字this将指向ball0

因此,这行:this.name=specifiedName变成了ball0.name="Soccer Ball"

它主要是说:给ball0添加属性name,属性值是Soccer Ball

我们现在只是添加了一个name属性给ball0,看起来和上一个例子中所做的很象,但却是一个更好更具扩展性的方法。现在,我们可以随心所欲的创建许多带有属性的ball而无需我们手动添加它们。而且,人们也希望创建的Ball对象能够清晰地看懂它的构造函数并且能够轻松找出Ball的所有属性。让我们添加更多属性到Ball里。

Example DT5

Language:  Javascript
function Ball(color, specifiedName, owner, weight)
{
  this.name=specifiedName;                
  this.color=color;
  this.owner=owner;
  this.weight=weight;
}
var ball0=new Ball("black/white", "Soccer Ball", "John", 20);  
var ball1=new Ball("gray", "Bowling Ball", "John", 30);  
var ball2=new Ball("yellow", "Golf Ball", "John", 55);  
var balloon=new Ball("red", "Balloon", "Pete", 10);  
 
alert(ball0.name);                        // 输出 "Soccer Ball"
alert(balloon.name);                      // 输出 "Balloon"
alert(ball2.weight);                      // 输出 "55"

运行示例

嘿!使用面向对象术语,你可以说Ball是一个拥有如下属性的对象类型:name, color, owner, weight。

将对象赋给属性

我们并没被限制只能添加形如字符串或者数字之类的简单数据类型作为属性。我们也能够将对象赋给属性。下面,supervisorEmployee的一个属性.

Example DT6

Language:  Javascript
function Employee(name, salary, mySupervisor)
{
  this.name=name;                
  this.salary=salary;
  this.supervisor=mySupervisor;
}
var boss=new Employee("John", 200);
 
var manager=new Employee("Joan", 50, boss);  
var teamLeader=new Employee("Rose", 50, boss);  
 
alert(manager.supervisor.name+" is the supervisor of "+manager.name);
alert(manager.name+"\'s supervisor is "+manager.supervisor.name);

会输出什么呢?运行示例

就像你在上面这个例子中看到的那样,managerteamLeader都有一个supervisor属性,而这个属性是类型Employee的一个对象。

将函数作为属性

任何类型的对象都可以作为一个属性,回忆一下前面的Example 4(不是Example DT4),函数也是一个对象。所以你可以让一个函数作为一个对象的一个属性。下面,我将添加两个函数getSalaryaddSalary

Example DT7

Language:  Javascript
function Employee(name, salary)
{
  this.name=name;                
  this.salary=salary;
 
  this.addSalary=addSalaryFunction;
 
  this.getSalary=function()
                 {
                   return this.salary;
                 };
}
function addSalaryFunction(addition)
{
  this.salary=this.salary+addition;
}
 
var boss=new Employee("John", 200000);
boss.addSalary(10000);                    // boss 长了 10K 工资……为什么老板工资可以长这么多:'(
alert(boss.getSalary());                  // 输出 210K……为什么默认工资也那么高……:'(

运行示例

addSalarygetSalary演示了几种将函数赋给属性的不同方法。如果你记得我们最开始的讨论;我讨论了三种声明函数的不同方式。所有那些在这里都是适用的,但是上面展示的两个最常用。

让我们看看有什么不同。下面,注意一下9-12行的代码。当这部分代码执行的时候,函数getSalary被声明。如前面数次提到的,一个函数声明的结果是一个对象被创建。所以这时候boss被创建(接下来的高亮行),而boss里有一个getSalary属性。

function Employee(name, salary)
{
  this.name=name;
  this.salary=salary;

  this.addSalary=addSalaryFunction;

  this.getSalary=function()
                 {
                   return this.salary;
                 };
}
function addSalaryFunction(addition)
{
  this.salary=this.salary+addition;
}

var boss=new Employee("John", 200000);
var boss2=new Employee("Joan", 200000);
var boss3=new Employee("Kim", 200000);
 

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

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

Example DT8

Language:  Javascript
function Employee(name, salary)
{
  this.name=name;                
  this.salary=salary;
 
  this.addSalary=addSalaryFunction;
  this.getSalary=function()
                 {
                   return this.salary;
                 };
}
function addSalaryFunction(addition)
{
  this.salary=this.salary+addition;
}
 
var boss1=new Employee("John", 200000);
var boss2=new Employee("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"
// 因为两个对象都指向同一个函数,(子乌注:原文写are not pointing to the same function,疑为笔误)
// 当修改其中一个的时候,会影响所有的实例(所以两个都输出“boss2”).

运行示例

也许不是重要的事情,但这里有一些关于运行类似上面的getSalary的内嵌函数的结论: 1) 需要更多的存储空间来存储对象(因为每一个对象实例都会有它自己的getSalary代码拷贝);2) javascript需要更多时间来构造这个对象。

让我们重新写这个示例来让它更有效率些。

Example DT9

Language:  Javascript
function Employee(name, salary)
{
  this.name=name;                
  this.salary=salary;
 
  this.addSalary=addSalaryFunction;
  this.getSalary=getSalaryFunction;
}
function getSalaryFunction()
{
  return this.salary;
}
 
function addSalaryFunction(addition)
{
  this.salary=this.salary+addition;
}

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

分享家:Addthis中国

Leave a comment for: "javascript的函数"

*

Tag Cloud