オブジェクト指向JavaScriptによるオブジェクト作成の詳細解説(1)_javascriptスキル

今回は JavaScript のオブジェクト指向技術を詳しく学習します。学習する前に、オブジェクト指向の用語をいくつか説明する必要があります。これはすべてのオブジェクト指向言語に共通することです。オブジェクト指向の用語がいくつかあります:
1.オブジェクト
ECMA-262 では、オブジェクトを「順序のない属性の集合であり、各属性にはプリミティブな値、オブジェクト、または関数が格納される」と定義されています。厳密に言えば、これはオブジェクトが特定の順序ではない値の配列であることを意味します。 ECMAScript はこの方法でオブジェクトを定義しますが、より一般的な定義は、名詞 (人、場所、または物) のコードベースの表現です。
2. カテゴリ
すべてのオブジェクトはクラスによって定義され、クラスはオブジェクトのレシピと考えることができます。クラスは、オブジェクトのインターフェイス (開発者がアクセスするプロパティとメソッド) だけでなく、オブジェクトの内部動作 (プロパティとメソッドを機能させるコード) も定義します。コンパイラとインタプリタは両方とも、クラス仕様に基づいてオブジェクトを構築します。
3. 例
プログラムがクラスを使用してオブジェクトを作成する場合、生成されたオブジェクトはクラスのインスタンスと呼ばれます。クラスが生成できるオブジェクトの数の唯一の制限は、コードが実行されているマシンの物理メモリによって決まります。各インスタンスは同じように動作しますが、インスタンスは独立したデータのセットを処理します。クラスからオブジェクト インスタンスを作成するプロセスはインスタンス化と呼ばれます。
前の章で、ECMAScript には正式なクラスがないことを述べました。対照的に、ECMA-262 では、オブジェクト定義をオブジェクトのレシピとして記述します。オブジェクト定義は実際にはオブジェクト自体であるため、これは ECMAScript ロジックの妥協です。クラスは実際には存在しませんが、ほとんどの開発者はこの用語に馴染みがあり、この 2 つは機能的に同等であるため、オブジェクト定義をクラスと呼びます。
事前定義されたオブジェクトの使用は、オブジェクト指向言語の機能の一部にすぎません。その真の能力は、独自の専用オブジェクトを作成できることにあります。 ECMAScript には、オブジェクトを作成するためのメソッドが多数あります。
1. オリジナルの方法
オブジェクトのプロパティはオブジェクトの作成後に動的に定義できるため、JavaScript が初めて導入されたとき、多くの開発者は次のようなコードを作成しました。

var Car = new Object(); 
Car.color = "blue"; 
Car.doors = 4; 
Car.mpg = 25; 
Car.showColor = function() { 
  return this.color; 
}; 
document.write(Car.showColor());//输出：blue 

上記のコードで、オブジェクト Car を作成します。次に、それにいくつかの属性を与えます。青色、ドアが 4 つ、燃費は 1 ガロンあたり 25 マイルです。最後の属性は実際には関数へのポインターであり、属性がメソッドであることを意味します。このコードを実行すると、オブジェクト Car が使用できるようになります。ただし、ここで問題が発生します。複数の Car インスタンスを作成する必要がある場合があり、その場合、同様のコードを多数繰り返すことになり、非常に面倒になります。

2. ファクトリーメソッド 複数の同様のオブジェクト宣言に関する上記の問題を解決するために、開発者は、特定のタイプのオブジェクトを作成して返すことができるファクトリを作成しました。この方法は、インスタンス化されたオブジェクトの大量の重複の問題を解決するためのものです。
(1) パラメータなしのファクトリメソッド
たとえば、関数 createCar() を使用すると、Car オブジェクトを作成する前述の操作をカプセル化できます。

function createCar() { 
var TempCar = new Object(); 
TempCar.color = "blue"; 
TempCar.doors = 4; 
TempCar.mpg = 25; 
TempCar.showColor = function() { 
    return this.color; 
 }; 
 return TempCar; 
}; 
var Car1 = createCar(); 
var Car2 = createCar(); 
document.write(Car1.showColor()+"<br/>");//输出：blue 
document.write(Car2.showColor());//输出：blue 

ここでは、最初の例のすべてのコードが createCar() 関数に含まれています。さらに、TempCar オブジェクトを関数値として返す追加のコード行があります。この関数を呼び出すと、新しいオブジェクトが作成され、必要な属性がすべて与えられ、前に説明した Car オブジェクトがコピーされます。したがって、このアプローチを使用すると、まったく同じプロパティを持つ 2 つのバージョンの Car オブジェクト (Car1 と Car2) を簡単に作成できます。

(2) パラメータ付きのファクトリメソッド

また、単純に属性にデフォルト値を与えるのではなく、createCar() 関数を変更して各属性のデフォルト値を渡すこともできます。

createCar() 関数にパラメータを追加することで、作成する Car オブジェクトの color、door、mpg 属性に値を割り当てることができます。これにより、2 つのオブジェクトが同じプロパティを持つことになりますが、プロパティ値は異なります。

function createCar(Color,Doors,Mpg) { 
 var TempCar = new Object(); 
 TempCar.color = Color; 
 TempCar.doors = Doors; 
 TempCar.mpg = Mpg; 
 TempCar.showColor = function() { 
    return this.color; 
 }; 
 return TempCar; 
}; 
var Car1 = createCar("red",4,23); 
var Car2 = createCar("blue",3,25); 
document.write(Car1.showColor()+"<br/>");//输出：red 
document.write(Car2.showColor());//输出：blue 

ファクトリ メソッドはインスタンス化の繰り返しの問題を解決しますが、まだ問題があります。つまり、前の例では、関数 createCar() が呼び出されるたびに、新しい関数 showColor() を作成する必要があります。つまり、各オブジェクト独自の showColor () バージョンがあります。実際、すべてのオブジェクトは同じ機能を共有します。一部の開発者は、この問題を回避するために、ファクトリ関数の外でオブジェクトのメソッドを定義し、属性を介してそのメソッドをポイントします。

在上面这段重写的代码中，在函数 createCar()之前定义了函数 showColor()。在createCar()内部，赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲，这样解决了重复创建函数对象的问题；但是从语义上讲，该函数不太像是对象的方法。所有这些问题都引发了开发者定义的构造函数的出现。
3、构造函数方式
创建构造函数就像创建工厂方式的函数一样容易。第一步选择构造函数的名字。根据惯例，这个名字的首字母大写，以使它与首字母通常是小写的变量名分开。除了这点不同，构造函数看起来很像工厂方式的函数。请看下面的例子：

function Car(Color,Doors,Mpg) { 
 this.color = Color; 
 this.doors = Doors; 
 this.mpg = Mpg; 
 this.showColor = function() { 
    return this.color; 
 }; 
}; 
var Car1 = new Car("red",4,23); 
var Car2 = new Car("blue",3,25); 
document.write(Car1.showColor()+"<br/>");//输出：red 
document.write(Car2.showColor());//输出：blue 

       下面为您解释上面的代码与工厂方式的差别。首先在构造函数内没有创建对象，而是使用this关键字。使用new运算符构造函数时，在执行第一行代码前先创建一个对象，只有用this才能访问该对象。然后可以直接赋予this属性，默认情况下是构造函数的返回值（不必明确使用 return 运算符）。现在，用new运算符和对象名Car创建对象，就更像 ECMAScript 中一般对象的创建方式了。
      就像工厂方式的函数，构造函数会重复生成函数，为每个对象都创建独立的函数版本。不过，与工厂方式的函数相似，也可以用外部函数重写构造函数，同样地，这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在。在下篇文章中会详细的分析面向对象的原型方式以及其他综合的方式。

以上就是本文的全部内容，希望对大家的学习javascript程序设计有所帮助。