JavaScript で複数のオブジェクトを作成する 4 つの方法

この記事では、javascript に関する関連知識を提供します。主に、リテラル メソッド、ファクトリ パターン メソッド、コンストラクター、プロトタイプなど、複数のオブジェクトの作成に関する関連コンテンツを紹介します。コンストラクターの追加の問題を見てみましょう。皆様のお役に立てれば幸いです。

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

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

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 が人間であるか、動物であるか、ツールであるかなど、オブジェクトの正確なタイプを取得することはできません。オブジェクト - コンストラクター メソッド

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

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

// 约定俗成的规范，构造函数名字首字母大写
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 サイトの他の関連記事を参照してください。