JavaScript プロトタイプを理解する: OOP をマスターするための鍵-jsチュートリアル-php.cn

Understanding JavaScript Prototypes: A Key to Mastering OOP

JavaScript はプロトタイプベースの言語であるため、言語内のオブジェクトはプロトタイプから属性と関数を継承します。この設計パターンは、JavaScript のオブジェクト指向プログラミング (OOP) を理解するために不可欠です。 JavaScript についてさらに詳しく学びたい場合は、プロトタイプとその使用方法を理解することが重要です。この投稿では、プロトタイプの考え方、その使用方法、およびコードをより効果的で再利用可能で最適化する方法について説明します。

JavaScript のオブジェクトとは何ですか?

プロトタイプに進む前に、JavaScript オブジェクトとは何かを明確にしましょう。 JavaScript オブジェクトは基本的にキーと値のペアのコレクションです。 JavaScript オブジェクトは柔軟性があり、ファクトリ関数、コンストラクター関数、オブジェクトリテラルなど、さまざまな方法で作成できます。

オブジェクトの作成

1. オブジェクトリテラル

オブジェクトを作成する最も簡単な方法は、オブジェクトリテラルを使用することです。

let obj = {
    name: 'John',
    age: 30
};

ログイン後にコピー

2. コンストラクタ関数

コンストラクター関数は、同様のプロパティを持つオブジェクトのインスタンスを作成するために使用されます。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

let person1 = new Person('Alice', 25);

ログイン後にコピー

3. ファクトリー機能

ファクトリ関数は呼び出されるたびに新しいオブジェクトを返します:

function createPerson(name, age) {
    return {
        name: name,
        age: age
    };
}

let person2 = createPerson('Bob', 40);

ログイン後にコピー

関数からオブジェクトを返す

JavaScript 関数はオブジェクトを返すことができるため強力であり、これは特定のプロパティやメソッドを持つインスタンスを作成するのに役立ちます。

例: 関数からオブジェクトを返す

function createCar(make, model) {
    return {
        make: make,
        model: model,
        getDetails: function() {
            return `${this.make} ${this.model}`;
        }
    };
}

let car = createCar('Toyota', 'Corolla');
console.log(car.getDetails()); // Toyota Corolla

ログイン後にコピー

プロトタイプを使用したオブジェクト作成の最適化

JavaScript のプロトタイプベースの性質の重要な側面の 1 つは、オブジェクトのプロトタイプでメソッドを定義できることです。これにより、オブジェクトごとにメソッドを個別に定義するのではなく、複数のオブジェクトが同じメソッドを共有できるようになり、メモリ使用量が最適化されます。

メモリ最適化の例

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.getDetails = function() {
    return `${this.name} is ${this.age} years old`;
};

let person1 = new Person('Alice', 25);
let person2 = new Person('Bob', 30);

console.log(person1.getDetails()); // Alice is 25 years old
console.log(person2.getDetails()); // Bob is 30 years old

ログイン後にコピー

上記の例では、person1 と person2 の両方が、プロトタイプで定義されている同じ getDetails メソッドを共有しています。これは、それぞれがメソッドの独自のコピーを持たないことを意味し、メモリを節約します。

Object.create() とプロトタイプ

Object.create() メソッドを使用すると、特定のプロトタイプを継承する新しいオブジェクトを作成できます。

例: Object.create() の使用

let personProto = {
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

let person = Object.create(personProto);
person.name = 'Charlie';
person.greet(); // Hello, my name is Charlie

ログイン後にコピー

この場合、person は personProto から継承します。つまり、greet メソッドにアクセスできます。

プロトタイプを深く理解する

JavaScript のすべてのオブジェクトにはプロトタイプがあり、それもオブジェクトです。このプロトタイプオブジェクトは、オブジェクトによって継承される独自のプロパティとメソッドを持つことができます。この継承のチェーンはプロトタイプチェーンとして知られています。

例: プロトタイプの動作

let obj = {
    name: 'John',
    age: 30
};

ログイン後にコピー

この例では、dog は Animal のインスタンスであり、Animal.prototype から speech メソッドを継承しています。

コンストラクター関数とプロトタイプ

コンストラクター関数は、同じオブジェクト型の複数のインスタンスを作成する一般的な方法です。これらの関数はプロトタイプと連携して動作し、インスタンス間でメソッドを共有します。

例: プロトタイプメソッドを使用したコンストラクター関数

function Person(name, age) {
    this.name = name;
    this.age = age;
}

let person1 = new Person('Alice', 25);

ログイン後にコピー

ここでは、プロトタイプの継承により、book1 と book2 の両方が getDetails メソッドを共有しています。

新しいキーワードとこのキーワード

コンストラクター関数で new キーワードを使用すると、オブジェクトの新しいインスタンスが作成され、this キーワードが新しいインスタンスにバインドされます。

例: 新しいキーワードの使用

function createPerson(name, age) {
    return {
        name: name,
        age: age
    };
}

let person2 = createPerson('Bob', 40);

ログイン後にコピー

この場合、new キーワードは Laptop の新しいインスタンスを作成し、これはコンストラクター内のそのインスタンスを参照します。

ES6 クラスの構文

ES6 では、JavaScript にクラス構文が導入され、コンストラクター関数とプロトタイプを定義するためのより便利で馴染みのある方法が提供されました。ただし、JavaScript のクラスは、プロトタイプベースの継承モデルにおける糖衣構文にすぎないことに注意することが重要です。

例: クラスの使用

function createCar(make, model) {
    return {
        make: make,
        model: model,
        getDetails: function() {
            return `${this.make} ${this.model}`;
        }
    };
}

let car = createCar('Toyota', 'Corolla');
console.log(car.getDetails()); // Toyota Corolla

ログイン後にコピー

ここで、Person クラスはコンストラクター関数とプロトタイプメソッドの例と同様に動作しますが、構文はより簡潔です。

配列とプロトタイプ

JavaScript 配列はオブジェクトであり、すべてのオブジェクトと同様に、プロトタイプである Array.prototype からプロパティとメソッドを継承します。これが、配列に対してプッシュ、ポップ、リデュースなどの配列固有のメソッドを呼び出すことができる理由です。

例: 配列とプロトタイプの操作

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.getDetails = function() {
    return `${this.name} is ${this.age} years old`;
};

let person1 = new Person('Alice', 25);
let person2 = new Person('Bob', 30);

console.log(person1.getDetails()); // Alice is 25 years old
console.log(person2.getDetails()); // Bob is 30 years old

ログイン後にコピー

この例では、Array.prototype を拡張して、すべての配列インスタンスで共有される sum メソッドを組み込みます。