首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >JavaScript .prototype是如何工作的?

JavaScript .prototype是如何工作的?
EN

Stack Overflow用户
提问于 2009-02-21 12:31:18
回答 8查看 504.2K关注 0票数 2.1K

我对动态编程语言不是很感兴趣,但我已经写了我自己的JavaScript代码。我从来没有真正理解过这种基于原型的编程,有人知道它是如何工作的吗?

代码语言:javascript
复制
var obj = new Object();
obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();

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

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

更新:正确的方式

代码语言:javascript
复制
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

此外,这些slides真的帮助很大。

EN

回答 8

Stack Overflow用户

发布于 2011-01-24 11:42:36

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

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

示例:

代码语言:javascript
复制
//Define a functional object to hold persons in JavaScript
var Person = function(name) {
  this.name = name;
};

//Add dynamically to the already defined object a new getter
Person.prototype.getName = function() {
  return this.name;
};

//Create a new object of type Person
var john = new Person("John");

//Try the getter
alert(john.getName());

//If now I modify person, also John gets the updates
Person.prototype.sayMyName = function() {
  alert('Hello, my name is ' + this.getName());
};

//Call the new method on john
john.sayMyName();

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

代码语言:javascript
复制
//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());

代码语言:javascript
复制
var Person = function (name) {
    this.name = name;
};
Person.prototype.getName = function () {
    return this.name;
};
var john = new Person("John");
alert(john.getName());
Person.prototype.sayMyName = function () {
    alert('Hello, my name is ' + this.getName());
};
john.sayMyName();
var Customer = function (name) {
    this.name = name;
};
Customer.prototype = new Person();

var myCustomer = new Customer('Dream Inc.');
myCustomer.sayMyName();
Customer.prototype.setAmountDue = function (amountDue) {
    this.amountDue = amountDue;
};
Customer.prototype.getAmountDue = function () {
    return this.amountDue;
};
myCustomer.setAmountDue(2000);
alert(myCustomer.getAmountDue());

如上所述,我不能在Person上调用setAmountDue(),getAmountDue()。

代码语言:javascript
复制
//The following statement generates an error.
john.setAmountDue(1000);
票数 1.8K
EN

Stack Overflow用户

发布于 2009-02-21 12:37:11

prototype允许您创建类。如果你不使用prototype,那么它就会变成一个静态的。

下面是一个简短的示例。

代码语言:javascript
复制
var obj = new Object();
obj.test = function() { alert('Hello?'); };

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

在下面的代码中

代码语言:javascript
复制
function obj()
{
}

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

obj已经变成了一个可以实例化的类。obj可以存在多个实例,并且它们都有test函数。

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

票数 79
EN

Stack Overflow用户

发布于 2009-02-21 12:41:32

Javascript没有通常意义上的继承,但它有原型链。

原型链

如果在对象中找不到某个对象的成员,它会在原型链中查找该成员。链由其他对象组成。可以使用__proto__变量访问给定实例的原型。每个对象都有一个,因为javascript中的类和实例之间没有区别。

将函数/变量添加到原型的优点是,它只需在内存中出现一次,而不是针对每个实例。

它对于继承也很有用,因为原型链可以由许多其他对象组成。

票数 30
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/572897

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档