首页 > PHP资讯 > HTML5培训技术 > JS学习之道:JS中的prototype的含义

JS学习之道:JS中的prototype的含义

HTML5培训技术

我们知道JScript中对象的prototype属性,是用来返回对象类型原型的引用的。我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会"继承"赋予该对象原型的操作。但是这个prototype到底是怎么实现和被管理的呢?

对于对象的prototype属性的说明,JScript手册上如是说:所有JScript内部对象都有只读的prototype属性。可以向其原型中动态添加功能(属性和方法),但该对象不能被赋予不同的原型。然而,用户定义的对象可以被赋给新的原型。

下面我们看三个经典的prototype属性的使用示例。

1、为脚本环境内建对象添加方法:


程序代码
Array.prototype.max= function()
{
var i, max = this[0];
for (i = 1; i < this.length; i++)
{
if (max < this[i])
max = this[i];
}
return max;
};


2、为用户自定义类添加方法:

程序代码
function TestObject(name)
{
this.m_Name = name;
}

TestObject.prototype.ShowName= function()
{
alert(this.m_Name);
};

3、更新自定义类的prototype:


程序代码
function TestObjectA()
{
this.MethodA = function()
{
alert('TestObjectA.MethodA()');//显示这一段文字而已
}
}

function TestObjectB()
{
this.MethodB = function()
{
alert('TestObjectB.MethodB()');
}
}

TestObjectB.prototype= new TestObjectA();


第三个很眼熟吧?对啊,它就是我们前面介绍的原型继承法呀~~不过今天我们不是研究"继承",之所以可以这样来实现一种继承,只是利用了prototype属性的一个副作用而已。

prototype还有一个默认的属性:constructor,是用来表示创建对象的函数的(即我们OOP里说的构造函数)。constructor属性是所有具有prototype属性的对象的成员。它们包括除Global和Math对象以外的所有JScript内部对象。constructor属性保存了对构造特定对象实例的函数的引用。

弄清楚了JScript中prototype属性怎么使用后,下面我们再来深入的研究它。
上面的文章中我罗列了一下prototype属性在JScript中的各种用法,但是prototype这个东西却不是JScript创造出来的,JScript实际上是使用了我们设计模式中prototypepattern的一种衍生形式。下面我先简单的说一下prototypepattern,然后再来看到底JScript中的prototype是怎么回事?!

What'sprototype pattern?

Specifythe kinds of objects to create using a prototypical instance, andcreate new objects by copying this prototype.

用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。

原型模式允许一个对象再创建另外一个可定制的对象,根本无需知道任何如何创建的细节,工作原理是:通过将一个原型对象传给那个要发动创建的对象,这个要发动创建的对象通过请求原型对象拷贝它们自己来实施创建。

继续了解到底什么是prototypepattern,可以参看'设计模式之Prototype(原型)'这篇文章,即使不懂 >


JScript PrototypeResearch


<script language="javascript">
function RP()
{
RP.PropertyA = 1;
RP.MethodA = function()
{
alert("RP.MethodA ");
};

this.PropertyA = 100;
this.MethodA = function()
{
alert("this.MethodA");
};
}

RP.prototype.PropertyA = 10;
RP.prototype.MethodA = function()
{
alert("RP.prototype.MethodA");
};
《script》
<script language="javascript">
rp = new RP();
delete RP.PropertyA;
alert(RP.PropertyA);
delete RP.MethodA;
RP.MethodA();
delete rp.PropertyA;
alert(rp.PropertyA);
delete rp.MethodA;
rp.MethodA();
《script》


HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持18不支持0