JavaScript Prototype原型属性详解与用法

Prototype原型属性详解与用法

函数：原型

每个构造函数都内置了一个名为prototype的属性（下文统一使用该英文术语）。该属性在特定类中声明通用变量或函数时非常有用。

prototype的定义

无需显式声明prototype属性，因为每个构造函数中均自动存在。参考以下示例：

Example PT1

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

给prototype添加属性

如上所示，prototype是一个对象，因此可以为其添加属性。添加到prototype的属性将成为由该构造函数创建的所有对象的共有属性。

例如，定义一个数据类型Fish，希望所有鱼对象都拥有livesIn="water"和price=20属性。为此，可以在Fish构造函数的prototype中添加这些属性。

Example PT2

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

接下来创建几条鱼：

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

查看这些鱼拥有的属性：

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

输出结果应为：

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

可以看到所有鱼都拥有livesIn和price属性，即使未为每条鱼单独声明。这是因为对象创建时，构造函数将其prototype属性赋值给新对象的内部属性__proto__。对象通过__proto__查找其属性。

同样可以通过prototype为所有对象添加共用函数。其优势在于：无需每次构造对象时都创建并初始化该函数。为解释这一点，重新审视Example DT9并使用prototype重写：

用prototype给对象添加函数

Example PT3

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

像往常一样创建对象：

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

并验证：

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

图示说明prototype的工作原理：每个实例(boss1, boss2, boss3)都有一个名为__proto__的内部属性，指向其构造函数(Employee)的prototype属性。执行getSalary或addSalary时，对象会在__proto__中找到并执行相应代码。注意：此处没有代码复制（与Example DT8的图表对比）。