Javascript的函数一(转)

相关推荐:  

• JavaScript基础语法_JavaScript函数
• JavaScript零基础入门 5：JavaScript函数详解
• JavaScript之全局函数详解
• html中调用javascript函数,如何在HTML中调用JavaScript函数
• JavaScript学习--splice()函数详解

更多相关推荐

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

Example DT1

CODE:

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

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

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

CODE:
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=Ball和Example 4中的ptr=myFunction语法一致。

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

添加属性

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

Example DT3 (creates 3 ball objects)

CODE:

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

CODE:
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

CODE:

function Ball(color, specifiedName, owner, weight)
{
  this.name=specifiedName;              
  this.color=color;
  this.owner=owner;
  this.weight=weigth;
}
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。

将对象赋给属性

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

Example DT6

CODE:

 

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);

会输出什么呢？

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

将函数作为属性

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

Example DT7

CODE:

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……为什么默认工资也那么高……:'(

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

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

CODE:

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);

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

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

Example DT8

CODE:

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

CODE:

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，而我们将在下一节讨论它。

函数：原型

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

prototype的定义

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

Example PT1

CODE:
function Test()
{
}
alert(Test.prototype);  // 输出 "Object"

给prototype添加属性

就如你在上面所看到的，prototype是一个对象，因此，你能够给它添加属性。你添加给prototype的属性将会成为使用这个构造函数创建的对象的通用属性。

例如，我下面有一个数据类型Fish，我想让所有的鱼都有这些属性：livesIn="water"和price=20；为了实现这个，我可以给构造函数Fish的prototype添加那些属性。

Example PT2

CODE:
function Fish(name, color)
{
  this.name=name;
  this.color=color;
}
Fish.prototype.livesIn="water";
Fish.prototype.price=20;

接下来让我们作几条鱼：

CODE:
var fish1=new Fish("mackarel", "gray");
var fish2=new Fish("goldfish", "orange");
var fish3=new Fish("salmon", "white");

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

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

输出应该是：

CODE:
"mackarel, gray, water, 20"
"goldfish, orange, water, 20"
"salmon, white  water, 20"

你看到所有的鱼都有属性livesIn和price,我们甚至都没有为每一条不同的鱼特别声明这些属性。这时因为当一个对象被创建时，这个构造函数将会把它的属性prototype赋给新对象的内部属性__proto__。这个__proto__被这个对象用来查找它的属性。

你也可以通过prototype来给所有对象添加共用的函数。这有一个好处：你不需要每次在构造一个对象的时候创建并初始化这个函数。为了解释这一点，让我们重新来看Example DT9并使用prototype来重写它：

用prototype给对象添加函数

Example PT3

CODE:

function Employee(name, salary)
{
  this.name=name;              
  this.salary=salary;
}
Employee.prototype.getSalary=function getSalaryFunction()
{
  return this.salary;
}

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

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

CODE:
var boss1=new Employee("Joan", 200000);
var boss2=new Employee("Kim", 100000);
var boss3=new Employee("Sam", 150000);

并验证它：

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