ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

JavaScript で複数のオブジェクトを作成するにはどうすればよいですか? 4つの方法を詳しく解説

著者：Eve Cole 更新時間：2022-06-29 14:16:35
JavaScript で複数のオブジェクトを作成するにはどうすればよいですか? JavaScript で複数のオブジェクトを作成する最良の方法はどれですか?リテラル？ファクトリーパターンアプローチ?コンストラクターメソッド?プロトタイプ方式？プロトタイプとコンストラクターメソッド?入って見れば分かりますよ。

開発プロセスでは、多くの同じプロパティやメソッドを持つ同様のオブジェクトを作成する必要が生じることがよくあります。では、複数のオブジェクトを作成するにはどのような方法があるでしょうか。最良の方法は何ですか?一緒に見てみましょう！

1. 複数のオブジェクトの作成 - リテラル メソッド

オブジェクトのリテラル メソッドは、オブジェクトを作成する最も一般的な方法の 1 つであり、リテラル メソッドで作成されたオブジェクトのプロパティは、デフォルトで書き込み可能、​​列挙可能、および構成可能です。

次のコードは、リテラル メソッドを使用して複数のオブジェクトを作成する方法を示しています。

//リテラル​​ メソッドを使用して複数のオブジェクトを作成する var person1 = {
    名前：「ジャム」、
    年齢：18歳、
    住所: '上海市'、
    食べる: function () {
        console.log(this.name + '食事')
    }
}
var person2 = {
    名前：「トム」、
    年齢：20歳、
    住所: '北京市'、
    食べる: function () {
        console.log(this.name + '食事')
    }
}
var person3 = {
    名前：「ライミング」、
    年齢：19歳、
    住所：「天津市」、
    食べる: function () {
        console.log(this.name + '食事')
    }
上記のコード
例

经过上述示例代码我们可以看出，仅仅创建了3个对象就用了24行，可以看出字面量方式的弊端：创建同样的对象时，需要编写重复的代码太多。

2. 複数のオブジェクトを作成する - ファクトリ パターン メソッド

ファクトリ パターンは、実際には一般的なデザイン パターンです。
通常、必要なオブジェクトを生成できるファクトリ メソッドがあります。

次のコードは、ファクトリ モード メソッドを使用して複数のオブジェクトを作成する操作を示しています。

//ファクトリ関数を使用して複数のオブジェクトを作成する function createperson (name, age , address ) {
    var p = {}
    p.name = 名前
    ページ数 = 年齢
    p.address = アドレス
    食べる = function () {
        console.log(名前 + '食事')
    }
    pを返す
}

var p1 = createperson('jam', 19, '上海市')
var p2 = createperson('tom', 14, '北京')
var p3 = createperson('li', 13, '天津市')

p3.eating() // li が食事をしているとき、

可以看出使用工厂模式方法创建了三个对象使用的代码明显比字面量少了好多行，but这就是最好的方式了吗？NO! NO! NO!
工厂模式方法的**弊端**就在于：以上述示例代码为例。当我们打印p1,p2,p3后，获取不到对象最真实的类型，比如p1是人还是动物还是工具

3. 複数のオブジェクトを作成する - コンストラクター メソッド

Constructor は皆さんもご存知かと思います

。

それ。いわゆるコンストラクター関数は、オブジェクトを生成するためのテンプレートを提供し、オブジェクトの基本構造を記述する関数です。コンストラクターは、それぞれが同じ構造を持つ複数のオブジェクトを生成できます。

次のコードは、コンストラクター メソッドを使用して複数のオブジェクトを作成する方法を示しています。

// 従来の仕様では、コンストラクター名の最初の文字が大文字になります。 function person (name, age, address) {
    this.name = 名前
    this.age = 年齢
    this.address = 住所
    this.eating = function () {
        console.log(this.name + '食事')
    }
    this.running = function () {
        console.log(this.name + 'running')
    }
}

var p1 = 新しい人('jam', 20, '北京')
var p2 = 新しい人('tom', 14, '上海市')
var p3 = 新しい人('li', 13, '天津市')

コンソールログ(p1)
// 出力結果 // 人 {
// 名前: 'ジャム',       
// 年齢: 20、
// 住所: '北京', 
// 食べる: [関数],
// 実行中: [関数]
// }
p1.eating() // Jam には

构造函数有个不成文的规范，那就是构造函数的名字首字母大写或者驼峰。
构造函数方式并不是最完美的创建多个对象的方式，也是有缺点的。
缺点：每个方法都要在每个实例上重新创建一遍，比如同样的eating方法和running方法都需要在p1,p2,p3的实例上去创建一遍，浪费很多的内存空间

4. 複数のオブジェクトを作成します

。

- プロトタイプとコンストラクター メソッドの組み合わせモードでは

、コンストラクターでインスタンス属性を定義します。その後、オブジェクトの作成時にこれらのパラメーターのみを渡す必要があります。プロトタイプ オブジェクトは、メソッドと共有プロパティを定義するために使用されます。

次のコードは
、

プロトタイプとコンストラクターを使用して複数のオブジェクトを作成する方法を示しています。

    this.name = 名前
    this.age = 年齢
    this.address = 住所
    これを食べる =
        this.running = function () {
            console.log(this.name + 'running')
        }
}
// 食べるメソッドと実行するメソッドをプロトタイプに追加するので、オブジェクトを作成するたびに同じメソッドをメモリに追加する必要はありません。 person.prototype.eating = function () {
    console.log(this.name + '食事')
}
Person.prototype.running = function () {
    console.log(this.name + 'running')
}
var p1 = 新しい人('jam', 20, '北京')
var p2 = 新しい人('tom', 14, '上海市')
var p3 = 新しい人('li', 13, '天津市')

コンソールログ(p1)
//出力結果:
// 人 {
// 名前: 'ジャム',       
// 年齢: 20、
// 住所: '北京', 
// 食べる: [関数],
// 実行中: [関数]
// }
p1.eating() //

最后的当然是压轴的呀，这种原型和构造函数方式是目前在ECMAScript中使用得最广泛、认同度最高的一种创建对象的方法。

これを読んで、複数のオブジェクトの作成はそれほど複雑ではないと感じましたか? プロトタイプとコンストラクターの方法を使用すると、数分でオブジェクトを作成できます。
関連記事