สรุปวิธีการ JavaScript เพื่อสร้างหลายวัตถุ

ในระหว่างกระบวนการพัฒนา เรามักจะพบกับความจำเป็นในการสร้าง Object หลายๆ ตัวที่คล้ายคลึงกัน ซึ่งอาจมีคุณสมบัติหรือวิธีการที่เหมือนกันหลายอย่าง แล้วเราจะสร้าง Object หลายๆ ตัวได้อย่างไร? วิธีที่ดีที่สุดคืออะไร? มาดูไปพร้อมๆ กันเลย!

1. สร้างวัตถุหลายรายการ - วิธีการตามตัวอักษร

วิธีการตามตัวอักษรของวัตถุเป็นหนึ่งในวิธีทั่วไปในการสร้างวัตถุ คุณสมบัติของวัตถุที่สร้างขึ้นในวิธีการตามตัวอักษรสามารถเขียนได้ นับได้ และกำหนดค่าได้ตามค่าเริ่มต้น

รหัสต่อไปนี้แสดงวิธีการสร้างหลายวัตถุโดยใช้วิธีตามตัวอักษร:

//สร้างหลายวัตถุโดยใช้วิธีการตามตัวอักษร var person1 = {
    ชื่อ'แจม'
    อายุ: 18,
    ที่อยู่: 'เมืองเซี่ยงไฮ้'
    การกิน: ฟังก์ชั่น () {
        console.log (this.name + 'การกิน')
    }} var person2 = {
    ชื่อ'ทอม'
    อายุ: 20,
    ที่อยู่: 'เมืองปักกิ่ง'
    การกิน: ฟังก์ชั่น () {
        console.log (this.name + 'การกิน')
    }} var person3 = {
    ชื่อ' ลิมมิ่ง'
    อายุ: 19,
    ที่อยู่: 'เมืองเทียนจิน'
    การกิน: ฟังก์ชั่น () {
        console.log (this.name + 'การกิน')
    }}

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

2. สร้างวัตถุหลายชิ้น - วิธีรูปแบบโรงงาน

รูปแบบโรงงานเป็นรูปแบบการออกแบบทั่วไป
โดยปกติแล้วเราจะมีวิธีแบบโรงงานซึ่งเราสามารถสร้างวัตถุที่ต้องการได้

รหัสต่อไปนี้แสดงการทำงานของการใช้วิธีโหมดโรงงานเพื่อสร้างวัตถุหลายชิ้น:

//สร้างวัตถุหลายวัตถุโดยใช้ฟังก์ชันโรงงาน createPerson (ชื่อ อายุ ที่อยู่ ) {
    วาร์ พี = {}
    p.name = ชื่อ
    หน้าอายุ = อายุ
    p.address = ที่อยู่
    p.eating = ฟังก์ชั่น () {
        console.log (ชื่อ + 'การกิน')
    -
    กลับหน้า
-

var p1 = createPerson('jam', 19, 'เมืองเซี่ยงไฮ้')
var p2 = createPerson('ทอม', 14, 'ปักกิ่ง')
var p3 = createPerson('li', 13, 'เมืองเทียนจิน')

p3.eating() // เมื่อ li กำลังกิน

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

3. สร้างหลายวัตถุ - วิธี Constructor

Constructor ฉันเชื่อว่าทุกคนคุ้นเคย มัน. ฟังก์ชันตัวสร้างที่เรียกว่าเป็นฟังก์ชันที่จัดเตรียมเทมเพลตสำหรับสร้างวัตถุและอธิบายโครงสร้างพื้นฐานของวัตถุ Constructor สามารถสร้างวัตถุได้หลายชิ้น โดยแต่ละชิ้นมีโครงสร้างเดียวกัน

รหัสต่อไปนี้แสดงการใช้เมธอดคอนสตรัคเตอร์เพื่อสร้างวัตถุหลายรายการ:

// ข้อกำหนดทั่วไป ตัวอักษรตัวแรกของชื่อคอนสตรัคเตอร์เป็นฟังก์ชันตัวพิมพ์ใหญ่ บุคคล (ชื่อ อายุ ที่อยู่) {
    this.name=ชื่อ
    this.age = อายุ
    this.address = ที่อยู่
    this.eating = ฟังก์ชั่น () {
        console.log (this.name + 'การกิน')
    -
    นี้.วิ่ง = ฟังก์ชั่น () {
        console.log (this.name + 'กำลังทำงาน')
    -
-

var p1 = บุคคลใหม่ ('jam', 20, 'ปักกิ่ง')
var p2 = บุคคลใหม่ ('ทอม', 14, 'เมืองเซี่ยงไฮ้')
var p3 = บุคคลใหม่ ('li', 13, 'เมืองเทียนจิน')

console.log(p1)
// ผลลัพธ์ที่ได้ // บุคคล {
// ชื่อ: 'แยม',       
// อายุ: 20,
// ที่อยู่: 'ปักกิ่ง' 
// การรับประทานอาหาร: [ฟังก์ชั่น]
// ทำงาน: [ฟังก์ชั่น]
-
p1.eating() // Jam

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

มาก —โหมดรวมของวิธีการต้นแบบบวกกับคอนสตรัคเตอร์

คือการกำหนดแอตทริบิวต์อินสแตนซ์บนคอนสตรัคเตอร์ จากนั้นจะต้องส่งผ่านพารามิเตอร์เหล่านี้เท่านั้นเมื่อสร้างอ็อบเจ็กต์ วัตถุต้นแบบใช้เพื่อกำหนดวิธีการและคุณสมบัติที่ใช้ร่วมกัน

รหัสต่อไปนี้แสดงวิธีสร้างวัตถุหลายรายการโดยใช้ต้นแบบและตัวสร้าง:

ฟังก์ชันบุคคล (ชื่อ อายุ ที่อยู่) {
    this.name=ชื่อ
    this.age = อายุ
    this.address = ที่อยู่
    นี่.การกิน=
        นี้.วิ่ง = ฟังก์ชั่น () {
            console.log (this.name + 'กำลังทำงาน')
        -
-
// เพิ่มวิธีการกินและวิธีการรันให้กับต้นแบบ ดังนั้นคุณไม่จำเป็นต้องเพิ่มวิธีการเดียวกันในหน่วยความจำทุกครั้งที่คุณสร้างวัตถุ Person.prototype.eating = function () {
    console.log (this.name + 'การกิน')
-
Person.prototype.running = ฟังก์ชั่น () {
    console.log (this.name + 'กำลังทำงาน')
-
var p1 = บุคคลใหม่ ('jam', 20, 'ปักกิ่ง')
var p2 = บุคคลใหม่ ('ทอม', 14, 'เมืองเซี่ยงไฮ้')
var p3 = บุคคลใหม่ ('li', 13, 'เมืองเทียนจิน')

console.log(p1)
//ผลลัพธ์ที่ได้:
// บุคคล {
// ชื่อ: 'แยม',       
// อายุ: 20,
// ที่อยู่: 'ปักกิ่ง' 
// การรับประทานอาหาร: [ฟังก์ชั่น]
// ทำงาน: [ฟังก์ชั่น]
-
p1.eating() //

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