☰

JavaScript .prototype はどのように機能しますか? 質問する

tag-icon • tag-icon javascript dynamic-languages prototype-oriented
JavaScript .prototype はどのように機能しますか? 質問する

私は動的プログラミング言語にそれほど興味はありませんが、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

これらもスライド本当に助かりました。

ベストアンサー1

Java、C#、C++ などの従来の継承を実装する言語では、まずクラス (オブジェクトの設計図) を作成し、次にそのクラスから新しいオブジェクトを作成したり、クラスを拡張して元のクラスを拡張する新しいクラスを定義したりすることができます。

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 から継承します。

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

前述のとおり、Person に対して setAmountDue()、getAmountDue() を呼び出すことはできません。

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

おすすめ記事