JavaScript で複数のオブジェクトを作成する 4 つの方法-jsチュートリアル-php.cn

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

WBOY

リリース： 2022-05-31 11:51:59

転載

2653 人が閲覧しました

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

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

[関連する推奨事項: 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 でオブジェクトを作成する最も広く使用され、認識されている方法。