Bagaimana untuk membuat berbilang objek dalam JavaScript? Penjelasan terperinci tentang empat kaedah

Bagaimana untuk mencipta berbilang objek dalam JavaScript? Manakah cara terbaik untuk mencipta berbilang objek dalam JavaScript? literal? Pendekatan corak kilang? Kaedah pembina? Kaedah prototaip? Prototaip tambah kaedah pembina? Anda akan tahu apabila anda masuk dan lihat.

Semasa proses pembangunan, kita sering menghadapi keperluan untuk mencipta banyak objek yang serupa, yang mungkin mempunyai banyak sifat atau kaedah yang sama, jadi bagaimanakah kita mencipta berbilang objek mereka? Apakah kaedah terbaik? Mari kita lihat bersama-sama!

1. Cipta berbilang objek - kaedah literal

Kaedah literal objek ialah salah satu cara yang paling biasa untuk mencipta objek dalam kaedah literal Sifat objek daripada boleh ditulis, boleh dikira dan boleh dikonfigurasikan secara lalai.

Kod berikut menunjukkan penggunaan literal untuk mencipta berbilang objek:

// 字面量方式创建多个对象
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. Cipta berbilang objek Objek - kaedah corak kilang

Corak kilang sebenarnya adalah corak reka bentuk biasa
Biasanya kita mempunyai kaedah kilang yang melaluinya kita boleh menjana objek yang diingini; kod menunjukkan operasi mencipta berbilang objek menggunakan kaedah corak kilang:

// 工厂函数方式创建多个对象
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在吃饭

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

3 berbilang objek - kaedah pembina

Saya percaya semua orang sudah biasa dengan pembina. Pembina yang dipanggil ialah fungsi yang menyediakan templat untuk menghasilkan objek dan menerangkan struktur asas objek. Pembina boleh menjana berbilang objek, setiap satu dengan struktur yang sama.

Kod berikut menunjukkan penciptaan berbilang objek menggunakan kaedah pembina:

// 约定俗成的规范，构造函数名字首字母大写
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在吃饭

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

4. Cipta berbilang objek - prototaip tambah kaedah pembina

Mod gabungan kedua-duanya adalah untuk mentakrifkan atribut contoh pada pembina, kemudian hanya pada objek yang dicipta Ini parameter perlu dilalui. Objek prototaip digunakan untuk menentukan kaedah dan sifat yang dikongsi.

Kod berikut menunjukkan penggunaan prototaip dan pembina untuk mencipta berbilang objek:

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中使用得最广泛、认同度最高的一种创建对象的方法。

Selepas membaca ini, adalah anda pasti? Rasanya mencipta berbilang objek tidak begitu rumit Anda boleh menciptanya dalam beberapa minit menggunakan kaedah prototaip dan pembina.

[Cadangan berkaitan:

tutorial video javascript

, bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk membuat berbilang objek dalam JavaScript? Penjelasan terperinci tentang empat kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!