javascript - JavaScript .prototype如何工作？(How does JavaScript .prototype work?)

Question

I'm not that into dynamic programming languages but I've written my fair share of JavaScript code.

(我不喜欢动态编程语言，但是我写了相当一部分JavaScript代码。)

I never really got my head around this prototype-based programming, does any one know how this works?

(我从来没有真正了解过这种基于原型的编程，有人知道它是如何工作的吗？)

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

I remember a lot discussion I had with people a while back (I'm not exactly sure what I'm doing) but as I understand it, there's no concept of a class.

(我记得很久以前与人们进行过多次讨论（我不确定自己在做什么），但是据我了解，这里没有一个课堂的概念。)

It's just an object, and instances of those objects are clones of the original, right?

(这只是一个对象，这些对象的实例是原始对象的副本，对吗？)

But what is the exact purpose of this ".prototype" property in JavaScript?

(但是，此“ .prototype”属性在JavaScript中的确切目的是什么？)

How does it relate to instantiating objects?

(它与实例化对象有何关系？)

Update: correct way (更新：正确的方法)

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

Also these slides really helped a lot.

(这些幻灯片也确实起到了很大作用。)

  ask by John Leidegren translate from so

Answer 1

In a language implementing classical inheritance like Java, C# or C++ you start by creating a class--a blueprint for your objects--and then you can create new objects from that class or you can extend the class, defining a new class that augments the original class.

(在实现Java，C＃或C ++之类的经典继承的语言中，您首先创建一个类（对象的蓝图），然后可以从该类中创建新对象，也可以扩展该类，定义一个新类来增强原来的课。)

In JavaScript you first create an object (there is no concept of class), then you can augment your own object or create new objects from it.

(在JavaScript中，您首先创建一个对象（没有类的概念），然后可以扩充自己的对象或从中创建新对象。)

It's not difficult, but a little foreign and hard to metabolize for somebody used to the classical way.

(这并不困难，但是对于那些习惯了经典方式的人来说，却有点陌生和难以代谢。)

Example:

(例：)

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

Until now I've been extending the base object, now I create another object and then inheriting from Person.

(到目前为止，我一直在扩展基础对象，现在创建另一个对象，然后从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 = 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()); 

While as said I can't call setAmountDue(), getAmountDue() on a Person.

(正如我所说的，我无法在Person上调用setAmountDue（）和getAmountDue（）。)

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