我不太喜欢动态编程语言,但我已经编写了相当多的JavaScript代码。我从未真正了解过这种基于原型的编程,有人知道它是如何工作的吗?

var obj = new Object();
obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();

我记得前一段时间我和人们进行了很多讨论(我不太确定我在做什么),但据我所知,没有什么课的概念。它只是一个对象,这些对象的实例是原始对象的克隆,对吗?

但JavaScript中这个“.prototype”属性的确切用途是什么?它与实例化对象有什么关系?

更新:正确方式

var obj = new Object(); // not a functional object
obj.prototype.test = function() { alert('Hello?'); }; // this is wrong!

function MyObject() {} // a first class functional object
MyObject.prototype.test = function() { alert('OK'); } // OK

这些幻灯片也帮了大忙。


当前回答

看完这篇文章后,我对JavaScript原型链感到困惑,然后我找到了这些图表

http://iwiki.readthedocs.org/en/latest/javascript/js_core.html#inheritance

这是一个清晰的图表,通过原型链显示JavaScript继承

and

http://www.javascriptbank.com/javascript/article/JavaScript_Classical_Inheritance/

这一个包含一个带有代码的示例和几个漂亮的图表。

原型链最终返回到Object.prototype。原型链可以根据您的需要进行技术上的扩展,每次都将子类的原型设置为父类的对象。

希望这对您理解JavaScript原型链也有帮助。

其他回答

原型允许您创建类。如果不使用原型,那么它将成为静态的。

这里有一个简短的例子。

var obj = new Object();
obj.test = function() { alert('Hello?'); };

在上面的例子中,您有静态函数调用测试。该函数只能由obj.test访问,您可以将obj想象为一个类。

其中如下代码所示

function obj()
{
}

obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();

obj已成为一个现在可以实例化的类。可以存在多个obj实例,它们都具有测试功能。

以上是我的理解。我正在把它做成一个社区维基,所以如果我错了,人们可以纠正我。

在Java、C#或C++等实现经典继承的语言中,首先要创建一个类——一个对象的蓝图——然后可以从该类创建新对象,或者可以扩展该类,定义一个新类来扩充原始类。

在JavaScript中,您首先创建一个对象(没有类的概念),然后您可以扩充自己的对象或从中创建新对象。这并不难,但对于习惯了传统方式的人来说,有点陌生,很难消化。

例子:

//在JavaScript中定义一个函数对象以容纳人员var Person=函数(名称){this.name=名称;};//向已定义的对象动态添加一个新的getterPerson.prototype.getName=函数(){返回this.name;};//创建Person类型的新对象var john=新人(“john”);//试试吸气剂警报(john.getName());//如果现在我修改人,John也会得到更新Person.prototype.sayMyName=函数(){alert('你好,我的名字是'+this.getName());};//对john调用新方法john.sayMyName();

到目前为止,我一直在扩展基本对象,现在我创建了另一个对象,然后从Person继承。

//Create a new object of type Customer by defining its constructor. It's not 
//related to Person for now.
var Customer = function(name) {
    this.name = name;
};

//Now I link the objects and to do so, we link the prototype of Customer to 
//a new instance of Person. The prototype is the base that will be used to 
//construct all new instances and also, will modify dynamically all already 
//constructed objects because in JavaScript objects retain a pointer to the 
//prototype
Customer.prototype = new Person();     

//Now I can call the methods of Person on the Customer, let's try, first 
//I need to create a Customer.
var myCustomer = new Customer('Dream Inc.');
myCustomer.sayMyName();

//If I add new methods to Person, they will be added to Customer, but if I
//add new methods to Customer they won't be added to Person. Example:
Customer.prototype.setAmountDue = function(amountDue) {
    this.amountDue = amountDue;
};
Customer.prototype.getAmountDue = function() {
    return this.amountDue;
};

//Let's try:       
myCustomer.setAmountDue(2000);
alert(myCustomer.getAmountDue());

var Person=函数(名称){this.name=名称;};Person.prototype.getName=函数(){返回this.name;};var john=新人(“john”);警报(john.getName());Person.prototype.sayMyName=函数(){alert('你好,我的名字是'+this.getName());};john.sayMyName();var客户=函数(名称){this.name=名称;};Customer.prototype=新角色();var myCustomer=新客户(“梦想股份有限公司”);myCustomer.sayMyName();Customer.prototype.setAmountDue=函数(amountDue){this.amountDue=amountDue;};Customer.prototype.getAmountDue=函数(){return this.amountDue;};myCustomer.setAmountDue(2000);警报(myCustomer.getAmountDue());

虽然如上所述,我不能调用setAmountDue(),但对Person调用getAmountDu()。

//The following statement generates an error.
john.setAmountDue(1000);

我发现在引用obj_n.prop_X时,将“原型链”解释为递归约定很有帮助:

如果obj_n.prop_X不存在,请检查obj_n+1.prop_X,其中obj_n+1=obj_n。[[原型]]

如果prop_X最终在第k个原型对象中找到,则

obj_1.prop_X=obj_1.[[原型]].[[原型]]..(k次)..[[原型]].prop_X

您可以在此处通过Javascript对象的财产找到它们之间的关系图:

http://jsobjects.org

将原型链分为两类可能会有所帮助。

考虑构造函数:

 function Person() {}

Object.getPrototypeOf(Person)的值是一个函数。事实上,它是Function.prototype。由于Person是作为一个函数创建的,所以它与所有函数共享相同的原型函数对象。与Person相同__proto__,但不应使用该属性。无论如何,使用Object.getPrototypeOf(Person),您可以有效地沿着所谓的原型链的阶梯前进。

向上的链条如下所示:

人员→ 功能.原型→ Object.prototype(终点)

重要的是,这个原型链与Person可以构造的对象关系不大。这些构造的对象有自己的原型链,而这个链可能和上面提到的对象没有共同的祖先。

以该对象为例:

var p = new Person();

p与Person没有直接的原型链关系。他们的关系是不同的。对象p有自己的原型链。使用Object.getPrototypeOf,您会发现链如下:

p型→ 人物原型→ Object.prototype(终点)

此链中没有函数对象(尽管可能是)。

所以Person似乎与两种链条有关,它们各自生活。要从一条链“跳”到另一条链,请使用:

.prototype:从构造函数的链跳到创建的对象的链。因此,此属性仅为函数对象定义(因为new只能用于函数)。构造函数:从创建的对象链跳到构造函数链。

以下是所涉及的两个原型链的可视化演示,以列表示:

总结如下:

prototype属性不提供主题原型链的信息,而是提供主题创建的对象的信息。

属性原型的名称会导致混淆,这并不奇怪。如果将此属性命名为prototypeOfConstructedInstance或类似的名称,可能会更清楚。

您可以在两个原型链之间来回跳转:

Person.prototype.constructor === Person

通过将不同的对象显式指定给原型属性,可以打破这种对称性(稍后将详细介绍)。

创建一个函数,获取两个对象

Person.prototype是在创建函数Person的同时创建的对象。它具有Person作为构造函数,即使该构造函数尚未实际执行。因此,同时创建了两个对象:

功能Person本身将函数作为构造函数调用时充当原型的对象

两者都是对象,但它们具有不同的角色:函数对象构造,而另一个对象表示函数将构造的任何对象的原型。原型对象将成为其原型链中构建对象的父对象。

由于函数也是一个对象,所以它在自己的原型链中也有自己的父级,但请记住这两个链是关于不同的事情的。

以下是有助于把握问题的一些等式——所有这些都是正确的:

函数Person(){};//这是构造函数(函数对象)的原型链信息:console.log(Object.getPrototypeOf(Person)==Function.prototype);//在同一层次结构中更进一步:console.log(Object.getPrototypeOf(Function.prototype)==Object.proto原型);console.log(Object.getPrototypeOf(Object.prototype)==null);console.log(Person.__proto__==Function.prototype);//这里我们交换通道,并查看构造函数的构造函数console.log(Person.constructor==函数);console.log(函数的个人实例);//Person.prototype由Person创建(创建时)//这里我们来回交换车道:console.log(Person.prototype.constructor==人员);//虽然它不是它的一个实例:console.log(!(Person.prototype instanceof Person));//实例是由构造函数创建的对象:var p=新角色();//类似于为构造函数显示的内容,这里我们有//构造函数创建的对象也是如此:console.log(Object.getPrototypeOf(p)==Person.prototype);console.log(p.__proto__==Person.prototype);//在这里,我们交换通道,并查看构造函数console.log(p.constructor==人员);console.log(p instanceof Person);

向原型链添加级别

虽然在创建构造函数函数时创建了原型对象,但可以忽略该对象,并为该构造函数创建的任何后续实例分配另一个应用作原型的对象。

例如:

function Thief() { }
var p = new Person();
Thief.prototype = p; // this determines the prototype for any new Thief objects:
var t = new Thief();

现在t的原型链比p长一步:

吨→ p→ 人物原型→ Object.prototype(终点)

另一个原型链不再长:Thief和Person是兄弟姐妹,在原型链中共享同一个父级:

个人}小偷}→ 功能.原型→ Object.prototype(终点)

之前展示的图形可以扩展到这一点(省略了最初的Thief.原型):

蓝色线条表示原型链,其他彩色线条表示其他关系:

在对象及其构造函数之间在构造函数和将用于构造对象的原型对象之间

我总是喜欢用类比来理解这类事情在我看来,原型继承与类低音继承相比非常令人困惑,尽管原型是更简单的范例。事实上,对于原型来说,确实没有继承,因此名称本身就具有误导性,更像是一种“委托”。

想象一下。。。。

你在上高中,你在课堂上,有一个今天到期的测验,但你没有笔来填写你的答案。多!

你坐在你的朋友芬尼乌斯旁边,他可能有一支笔。你问,他环顾了一下他的桌子,但没有成功,但他不是说“我没有笔”,而是一个很好的朋友,他会和他的另一个朋友Derp检查是否有笔。德普确实有一支备用笔,并将其交给芬尼乌斯,后者将其交由你完成测验。德普已将笔交给芬尼乌斯,后者已将笔委托给你使用。

这里重要的是,德普不会把笔交给你,因为你和他没有直接关系。

这是原型如何工作的一个简化示例,其中搜索数据树以查找您要查找的对象。