導入
ファクトリ関数とコンストラクターの概念を理解するには、まず関数とオブジェクトを理解する必要があります。.
似たようなプロパティや機能を持つオブジェクトを大量に作成すると、退屈で繰り返しが多くなりがちです。DRYコード原則（Don’t Repeat Yourself、同じことを繰り返さない）を念頭に置くことが重要です。より短く、より簡潔で、より効率的なコードを書くのに役立つ関数型パターンがあります。ファクトリー関数とコンストラクター関数はこれらの目的を達成できますが、どちらを使用すべきでしょうか？ファクトリー関数とコンストラクターとは何か、何ができて何ができないのか、そして両者の類似点と相違点について、もう少し詳しく見ていきましょう。.
ファクトリー関数とは何ですか?
ファクトリー関数は、原材料を受け取り、複数の製品を迅速に生産する実際の工場と考えることができます。一方、ファクトリー関数は特定の入力を受け取り、それらを使用して新しいオブジェクトを作成します。では、これは実際にどのように役立つのでしょうか？各オブジェクトを個別に作成することもできますが、時間がかかる可能性があります。同じプロパティで異なる値を持つオブジェクトを作成する場合は、ファクトリー関数を作成することでプロセスを高速化できます。.
const car1 = {
make: 'Toyota',
model: 'Tacoma',
year: 2018,
fuelType: 'gas',
bodyType: 'mid-size pick-up truck',
getFullName() {
return `${this.year} ${this.make} ${this.model}`;
}
}
console.log(car1.getFullName()); // => 2018 Toyota Tacoma上記の例では、特定のマシンを表すオブジェクトを作成しました。次に、これに似たオブジェクトを作成しましょう。.
const car2 = {
make: 'Tesla',
model: 'Model S',
year: 2018,
fuelType: 'electric',
bodyType: 'sedan',
getFullName() {
return `${this.year} ${this.make} ${this.model}`;
}
}
console.log(car2.getFullName()); // => 2018 Tesla Model S マシンオブジェクトの作成について延々と語り続けることもできますが、そんな時間がある人なんていないですよね？ では、これがファクトリー関数としてどのように機能するかを見てみましょう。.
function createCar (make, model, year, fuelType, bodyType) {
return {
make: make,
model: model,
year: year,
fuelType: fuelType,
bodyType: bodyType,
getFullName() {
return `${year} ${make} ${model}`;
}
}
}これで、新しいオブジェクトを作成するファクトリー関数ができました。あとはデータを渡してファクトリー関数に任せるだけです。.
function createCar (make, model, year, fuelType, bodyType) {
return {
make: make,
model: model,
year: year,
fuelType: fuelType,
bodyType: bodyType,
getFullName() {
return `${year} ${make} ${model}`;
}
}
}
const car1 = createCar('Toyota', 'Tacoma', 2018, 'gas', 'mid-size pick-up truck');
const car2 = createCar('Tesla', 'Model S', 2018, 'electric', 'sedan');
console.log(car1.getFullName()); // => 2018 Toyota Tacoma
console.log(car2.getFullName()); // => 2018 Tesla Model Sコードを繰り返す代わりに、ファクトリー関数を使用して任意の数のオブジェクトを作成できます。.
コンストラクターとは何ですか?
コンストラクター関数は、ファクトリー関数に非常によく似たJavaScriptパターンです。ただし、ファクトリー関数とは異なり、コンストラクター関数は実際にはオブジェクトを返しません。同じプロパティを持つ異なるオブジェクトを作成するには、「new」キーワードと「this」キーワードを使用する必要があります。それでは、コンストラクター関数がどのように動作するのかを視覚的に見ていきましょう。.
function Car(make, model, year, fuelType, bodyType) {
this.make = make
this.model = model
this.year = year
this.fuelType = fuelType
this.bodyType = bodyType
this.getFullName = () => {
return `${this.year} ${this.make} ${this.model}`;
}
}上記の例では、コンストラクタ関数は「this」というキーワードの使用を除けば、ファクトリー関数と非常によく似ています。「this」は、インスタンスオブジェクトを作成したコンストラクタ関数を指します。つまり、コンストラクタ関数では「this」は値を持ちません。これは、新しいオブジェクトのベースと考えることができます。.
function Car(make, model, year, fuelType, bodyType) {
this.make = make
this.model = model
this.year = year
this.fuelType = fuelType
this.bodyType = bodyType
this.getFullName = () => {
return `${this.year} ${this.make} ${this.model}`;
}
}
const car1 = new car('Toyota', 'Tacoma', 2018, 'gas', 'mid-size pick-up truck');
const car2 = new car('Tesla', 'Model S', 2018, 'electric', 'sedan');
console.log(car1.getFullName()); // => 2018 Toyota Tacoma
console.log(car2.getFullName()); // => 2018 Tesla Model Sコンストラクター関数を使ってオブジェクトを作成するには、「new」という別のキーワードを使用します。関数呼び出しの前に「new」ステートメントを使用すると、JavaScript は自動的に次の 2 つの処理を実行します。関数内では、「this」という名前の空のオブジェクトが作成されます。そして、関数を呼び出したステートメントに「this」オブジェクトが返されます。.
function Car(make, model, year, fuelType, bodyType) {
// const this = {};
this.make = make
this.model = model
this.year = year
this.fuelType = fuelType
this.bodyType = bodyType
this.getFullName = () => {
return `${this.year} ${this.make} ${this.model}`;
}
// return this;
}
const car1 = new car('Toyota', 'Tacoma', 2018, 'gas', 'mid-size pick-up truck');
const car2 = new car('Tesla', 'Model S', 2018, 'electric', 'sedan');
console.log(car1.getFullName()); // => 2018 Toyota Tacoma
console.log(car2.getFullName()); // => 2018 Tesla Model S継承
継承は、ファクトリ関数とビルダー関数の違いにおいて重要な役割を果たします。.
function createCar (make, model, year, fuelType, bodyType) {
return {
make: make,
model: model,
year: year,
fuelType: fuelType,
bodyType: bodyType,
getFullName() {
return `${year} ${make} ${model}`;
}
}
}
const car1 = createCar('Toyota', 'Tacoma', 2018, 'gas', 'mid-size pick-up truck');
const car2 = createCar('Tesla', 'Model S', 2018, 'electric', 'sedan');
car1.getFullName = function() {
return `My ${fuelType} ${bodyType} is a ${year} ${make} ${model}`;
}
console.log(car1.getFullName()); // => My gas mid-size pick-up truck is a 2018 Toyota Tacoma
console.log(car2.getFullName()); // => 2018 Tesla Model Sファクトリー関数の最初の例に戻りましょう。car1.getFullName() を再宣言したい場合はどうすればよいでしょうか？ car1.getFullName() と car2.getFullName() はメモリ上では同じ関数ではありません。各オブジェクトはそれぞれ独自の関数のコピーを取得します。つまり、関数がオブジェクトを作成して返す際に、プロパティと値がコピーされ、関数を呼び出す各オブジェクトにバインドされます。.
function car(make, model, year, fuelType, bodyType) {
// const this = {};
this.make = make
this.model = model
this.year = year
this.fuelType = fuelType
this.bodyType = bodyType
this.getFullName = () => {
return `${this.year} ${this.make} ${this.model}`;
}
// return this;
}
const car1 = new car('Toyota', 'Tacoma', 2018, 'gas', 'mid-size pick-up truck');
const car2 = new car('Tesla', 'Model S', 2018, 'electric', 'sedan');
console.log(car1); // => car {make: 'Toyota', model: 'Tacoma' , etc.}さて、上記のコンストラクタ関数を見てみましょう。コンストラクタが作成されると、独自のプロトタイプが作成されます。「new」キーワードを使用して新しいCarオブジェクトを作成すると、Car型のインスタンスが作成されます。つまり、car1のプロトタイプはCar型です。これで、car1はCarコンストラクタを継承するようになりました。これにより、Carプロトタイプにプロパティを追加できるようになります。.
Car.prototype.sentence = function() {
return `My ${this.fuelType} ${this.bodyType} is a ${this.year} ${this.make} ${this.model}`;
}console.log(car1); // => Car {
// make: 'Toyota',
// model: 'Tacoma',
// year: 2018,
// fuelType: 'gas',
// bodyType: 'mid-size pick-up truck',
// getFullName: [Function (anonymous)]
// }文関数はカービルダー自体に直接追加されないことに注意してください。.
console.log(Car.prototype); // => { sentence: [Function (anonymous)] }
しかし、プロトタイプを確認すると、そこにありました！これで新しく追加された機能にアクセスできるようになりました。.
console.log(car1.sentence()); // => My gas mid-size pick-up truck is a 2018 Toyota Tacoma
console.log(car2.sentence()); // => My electric sedan is a 2018 Tesla Model Sそれぞれの操作の仕組みがわかったところで、次はどちらを使うべきかという疑問が湧きます。どちらも同じ結果をもたらします。コンストラクタは、コンストラクタを継承するオブジェクトにプロパティを追加したり削除したりする場合に最適です。しかし、ファクトリー関数の方が理解しやすいかもしれません。結局のところ、ファクトリー関数は単なる関数だからです。ファクトリー関数では「new」キーワードを使う必要がありません。クロージャの力を借りれば、より柔軟に操作できます。クロージャを使うことで、「データプライバシー」と呼ばれる機能を実現できます。では、この仕組みを説明する別の例を見てみましょう。.
function createCar(make, model, year) {
return {
getFullName() {
return `${year} ${make} ${model}`;
}
}
}
const car1 = createCar('Toyota', 'Tacoma', 2018);
console.log(car1.getFullName()); // => 2018 Toyota Tacoma
console.log(car1.make); // => undefined
console.log(car1); // => { getFullName: [Function: getFullName] }結果
全体的に見て、独自のコードを書く上で重要なのは、必ずしも間違っているわけではないということです。コードを簡潔で簡潔に保つ良い方法があります。自分のケースに最適だと思う場合は、ファクトリー関数とコンストラクター関数を使用してください。.
