JavaScript로 여러 개체를 만드는 방법은 무엇입니까? 네 가지 방법에 대한 자세한 설명

개발 과정에서 우리는 동일한 속성이나 메소드를 많이 가질 수 있는 유사한 객체를 많이 생성해야 하는 경우가 많습니다. 그렇다면 여러 객체를 생성하는 방법은 무엇입니까? 가장 좋은 방법은 무엇입니까? 함께 살펴보시죠!

1. 여러 객체 생성 - 리터럴 메서드

객체의 리터럴 메서드는 객체를 생성하는 가장 일반적인 방법 중 하나입니다. 리터럴 메서드에서 생성된 객체의 속성은 기본적으로 쓰기 가능하고 열거 가능하며 구성 가능합니다.

다음 코드는 리터럴 메서드를 사용하여 여러 개체를 만드는 방법을 보여줍니다.

//리터럴 메서드를 사용하여 여러 개체 만들기 var person1 = {
    이름: '잼',
    나이: 18,
    주소: '상하이시',
    먹기: 함수 () {
        console.log(this.name + 'Eating')
    }
}
var 사람2 = {
    이름: '톰',
    나이: 20,
    주소: '베이징시',
    먹기: 함수 () {
        console.log(this.name + 'Eating')
    }
}
var 사람3 = {
    이름: '리밍',
    나이: 19,
    주소: '천진시',
    먹기: 함수 () {
        console.log(this.name + 'Eating')
    }
}

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

2. 여러 객체 생성 - 팩토리 패턴 방법

팩토리 패턴은 실제로 일반적인 디자인 패턴입니다.
일반적으로 원하는 객체를 생성할 수 있는 팩토리 메소드가 있습니다.

다음 코드는 팩토리 모드 메소드를 사용하여 여러 객체를 생성하는 작업을 보여줍니다.

//팩토리 함수 함수 createPerson(name, age, address)을 사용하여 여러 객체 생성 ) {
    var p = {}
    p.name = 이름
    페이지 나이 = 나이
    p.address = 주소
    p.eating = 함수 () {
        console.log(이름 + '식사')
    }
    반환 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. 여러 객체 생성 - 생성자 방법

생성자 모두가 익숙하다고 생각합니다

그것. 소위 생성자 함수는 객체를 생성하기 위한 템플릿을 제공하고 객체의 기본 구조를 설명하는 함수입니다. 생성자는 각각 동일한 구조를 가진 여러 개체를 생성할 수 있습니다.

다음 코드는 생성자 메소드를 사용하여 여러 객체를 생성하는 방법을 보여줍니다.

// 기존 사양에서는 생성자 이름의 첫 글자를 대문자로 사용합니다. function Person (이름, 나이, 주소) {
    this.name = 이름
    this.age = 나이
    this.address = 주소
    this.eating = 함수() {
        console.log(this.name + 'Eating')
    }
    this.running = 함수() {
        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 {
// 이름: '잼',       
// 나이: 20,
// 주소: '베이징', 
// 먹기: [함수],
// 실행 중: [함수]
// }
p1.eating() // Jam에는

构造函数有个不成文的规范，那就是构造函数的名字首字母大写或者驼峰。
构造函数方式并不是最完美的创建多个对象的方式，也是有缺点的。

이

缺点：每个方法都要在每个实例上重新创建一遍，比如同样的eating方法和running方法都需要在p1,p2,p3的实例上去创建一遍，浪费很多的内存空间

—프로토타입과 생성자 메서드의 조합 모드는

생성자에 인스턴스 속성을 정의한 다음 객체를 생성할 때 이러한 매개변수만 전달하면 됩니다. 프로토타입 객체는 메서드와 공유 속성을 정의하는 데 사용됩니다.

다음 코드는 프로토타입과 생성자를 사용하여 여러 객체를 생성하는 방법을 보여줍니다.

function Person(이름, 나이, 주소) {
    this.name = 이름
    this.age = 나이
    this.address = 주소
    this.eating =
        this.running = 함수() {
            console.log(this.name + '실행 중')
        }
}
// 프로토타입에 eating 메소드와 running 메소드를 추가하면 객체를 생성할 때마다 메모리에 동일한 메소드를 추가할 필요가 없습니다.
    console.log(this.name + 'Eating')
}
Person.prototype.running = 함수() {
    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)
//출력 결과:
// 사람 {
// 이름: '잼',       
// 나이: 20,
// 주소: '베이징', 
// 먹기: [함수],
// 실행 중: [함수]
// }
p1.eating() //

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

이 글을 읽고 나면 여러 개의 객체를 생성하는 것이 그렇게 복잡하지 않다는 생각이 드시나요? 프로토타입과 생성자의 방법을 사용하면 몇 분 안에 객체를 생성할 수 있습니다.