자바스크립트에서 객체를 생성하는 몇 가지 일반적인 모드 소개

이 글에서는 팩토리 패턴, 생성자 패턴, 프로토타입 패턴, 생성자와 프로토타입을 결합하는 패턴, 동적 프로토타입 패턴을 포함하여 JavaScript에서 객체를 생성하는 데 일반적으로 사용되는 몇 가지 패턴을 소개합니다.

1. 공장 모드

다음 코드를 보세요:

function getMySon(name,sex){
    var o={};
    o.name=name;
    o.sex=sex;
    o.sayName = function(){
        alert(this.name);
    }    return o;
}
son1 = getMySon('li ming','male');
son2 = getMySon('li hong','female');

공장 모드입니다. 함수에 객체를 정의하고 속성과 메서드를 추가한 후 마지막으로 객체를 반환합니다. 이 모드를 사용하면 객체 생성이 편리하지만, 해당 인스턴스를 누가 생성했는지 알 수 없다는 문제가 있습니다.
예를 들어, getMySon의 son1 인스턴스는 true를 반환할 수 없습니다. 여기의 인스턴스는 new를 통해 getMySon에 의해 정확하게 생성되지 않고 getMySon에서 생성되기 때문입니다.
그래서 팩토리 패턴은 많은 유형의 객체를 생성해야 하는 상황에는 적합하지 않습니다.

그렇다면 인스턴스의 출처를 정확하게 결정할 수 있도록 객체를 생성하는 방법은 무엇일까요? 다음으로 생성자 패턴에 대해 이야기해 보겠습니다.

2. 생성자 패턴

다음 코드를 보세요.

function getMySon(name,sex){
    this.name = name;    
    this.sex = sex;    
    this.sayName = function(){
        alert(this.name);
    }
}

son1 = new getMySon('li ming','female');

호출할 때 new를 사용하세요.

새 호출을 할 때 다음 단계를 수행하세요.

            1. 创建一个新的对象（并把空对象的__proto__属性设置为getMySon.prototype)。

            2.将构造函数的作用域赋给新对象（此时this 指向了这个新对象）。

            3.执行构造函数中的代码（通过this 为这个新对象添加属性）

            4.返回新对象。

이렇게 생성된 인스턴스는 getMySon의 son1 인스턴스를 사용하여 인스턴스를 생성한 사람을 확인할 수 있습니다.

그렇다면 생성자를 사용할 때의 문제점은 무엇입니까? new를 사용할 때마다 새 객체가 생성되므로 모든 데이터가 다른 인스턴스 간에 공유되지 않습니다. 하지만 sayName 함수의 경우 여러 개를 만들 필요가 없습니다. 그렇게 하면 공간이 낭비됩니다.

이것은 다음 유형인 프로토타입 모드로 이어집니다.

3. 프로토타입 모드

다음 코드를 보세요:

function getMySon(){}
getMySon.prototype.name = 'li ming';
getMySon.prototype.sex = 'female';
getMySon.prototype.sayName = function(){
    alert(this.name);
}

이것이 프로토타입 모드입니다(프로토타입 관련 지식은 여기서 자세히 논의하지 않습니다).

프로토타입 모드는 getMySon.prototype에 속성과 메서드를 추가합니다. 프로토타입은 모든 인스턴스에서 공유되며 모든 인스턴스에 하나의 복사본만 있는 것은 아닙니다.

이 방법을 사용하면 추가 공간을 차지하지 않고 함수 복사본을 하나만 허용합니다. 그러나 이름, 성별 등의 속성은 모든 인스턴스 간에 공유될 필요가 없으며 이러한 속성을 생성하기 위해 매개변수를 전달하는 프로토타입 모드를 사용하는 것은 불편합니다.

그런 다음 생성자 패턴과 프로토타입 패턴을 병합하여 각각의 장점을 활용할 수 있습니다. 인스턴스 간에 공유할 필요가 없고 매개변수를 전달하여 생성해야 하는 속성은 생성자 모드에서 생성되고, 메서드 등 각 인스턴스 간에 공유되어야 하는 속성은 프로토타입 모드에서 생성됩니다.

3. 생성자와 프로토타입을 결합하는 패턴
다음 코드를 보세요.

function getMySon(name,sex){
    this.name=name;    
    this.sex=sex;
}
getMySon.prototype.sayName(){
    alert(this.name);
}
son1=new getMySon('li ming','female');

생성자와 프로토타입을 결합하는 패턴입니다. 이 접근 방식은 생성자 패턴과 프로토타입 패턴의 장점을 결합합니다. 이는 객체 생성에 가장 일반적으로 사용되는 패턴입니다.

4. 동적 프로토타입 패턴

소위 동적 프로토타입 패턴은 실제로 생성자와 프로토타입을 결합하는 패턴을 캡슐화한 것입니다.
다음 코드를 보세요:

function getMySon(name,sex){
    this.name = name;    
    this.sex = sex;    //即使有多个需要定义的方法，也只需判断一个方法。
    if(typeof sayName != 'function'){ 
        getMySon.prototype.sayName=function(){
            alert(this.name);
        }
    }
}
son1=new getMySon('li ming','female');

동적 프로토타입 모드라고 명명된 이유는 getMySon이 다른 호출에서 변경되고 동적이기 때문입니다. sayName 함수의 정의는 getMySon이 처음 호출될 때만 실행됩니다.
본질적으로 공유할 필요가 없는 메소드는 여전히 생성자를 통해 정의하고, 공유해야 하는 메소드는 프로토타입을 통해 정의합니다. 그냥 모아서 캡슐화하면 됩니다.

위 내용은 자바스크립트에서 객체를 생성하는 몇 가지 일반적인 모드 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!