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

JavaScript で複数のオブジェクトを作成するにはどうすればよいですか? JavaScript で複数のオブジェクトを作成する最良の方法はどれですか?リテラル？ファクトリーパターンアプローチ?コンストラクターメソッド?プロトタイプ方式？プロトタイプとコンストラクターメソッド?入って見れば分かりますよ。

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

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

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

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

// 字面量方式创建多个对象
var person1 = {
    name: 'jam',
    age: 18,
    address: '上海市',
    eating: function () {
        console.log(this.name + '在吃饭')
    }
}
var person2 = {
    name: 'tom',
    age: 20,
    address: '北京市',
    eating: function () {
        console.log(this.name + '在吃饭')
    }
}
var person3 = {
    name: 'liming',
    age: 19,
    address: '天津市',
    eating: function () {
        console.log(this.name + '在吃饭')
    }
}

上記のコード例から、3 つのオブジェクトだけがオンラインで作成および使用されることがわかります。図 24 を見ると、リテラル方式の欠点がわかります。同じオブジェクトを作成するときに、あまりにも多くの繰り返しコードを記述する必要があります。

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

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

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

// 工厂函数方式创建多个对象
function createPerson (name, age, address) {
    var p = {}
    p.name = name
    p.age = age
    p.address = address
    p.eating = function () {
        console.log(name + '在吃饭')
    }
    return p
}

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

p3.eating() // li在吃饭

ファクトリ モード メソッドを使用して 3 つのオブジェクトを作成するために使用されるコードは、リテラル値より明らかに行数が少ないことがわかりましたが、これが最良の方法でしょうか? NO! NO! NO!
ファクトリ パターン メソッドの **欠点** は次のとおりです: 上記のサンプル コードを例に挙げます。 p1、p2、および p3 を出力すると、p1 が人間であるか、動物であるか、ツールであるかなど、オブジェクトの正確なタイプを取得できません。

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

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

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

// 约定俗成的规范，构造函数名字首字母大写
function Person (name, age, address) {
    this.name = name
    this.age = age
    this.address = address
    this.eating = function () {
        console.log(this.name + '在吃饭')
    }
    this.running = function () {
        console.log(this.name + '在跑步')
    }
}

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

console.log(p1)
// 输出结果
//  Person {
//     name: 'jam',       
//     age: 20,
//     address: '北京市', 
//     eating: [Function],
//     running: [Function]
//   }
p1.eating()  // jam在吃饭

コンストラクターには暗黙の規範があります。つまり、コンストラクターの最初の文字です。コンストラクター名は大文字の Or hump です。
コンストラクター メソッドは、複数のオブジェクトを作成するための最も完璧な方法ではなく、欠点もあります。
欠点: 各メソッドはインスタンスごとに再作成する必要があります。たとえば、同じ食事メソッドと実行メソッドを p1、p2、および p3 のインスタンスに作成する必要があるため、大量の無駄が発生します。

#4. 複数のオブジェクトの作成 - プロトタイプとコンストラクター メソッド

2 つの結合モードはコンストラクターで定義されます。インスタンス属性の場合、オブジェクトの作成時にこれらのパラメータを渡すだけで済みます。プロトタイプ オブジェクトは、メソッドと共有プロパティを定義するために使用されます。

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

function Person (name, age, address) {
    this.name = name
    this.age = age
    this.address = address
    this.eating =
        this.running = function () {
            console.log(this.name + '在跑步')
        }
}
// 将eating方法和running方法加在原型上，就不需要每次创建一个对象都去在内存中加一遍一样的方法
Person.prototype.eating = function () {
    console.log(this.name + '在吃饭')
}
Person.prototype.running = function () {
    console.log(this.name + '在跑步')
}
var p1 = new Person('jam', 20, '北京市')
var p2 = new Person('tom', 14, '上海市')
var p3 = new Person('li', 13, '天津市')

console.log(p1)
// 输出结果：
//  Person {
//     name: 'jam',       
//     age: 20,
//     address: '北京市', 
//     eating: [Function],
//     running: [Function]
//   }
p1.eating()  // jam在吃饭

最後のコードは、もちろん最後です。このプロトタイプとコンストラクターのメソッドは現在、 ECMAScript でオブジェクトを作成する最も広く使用され、認識されている方法。

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

【関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上がJavaScript で複数のオブジェクトを作成するにはどうすればよいですか? 4つの方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。