> 웹 프론트엔드 > JS 튜토리얼 > JS 디자인 패턴의 생성자 패턴에 대한 자세한 설명

JS 디자인 패턴의 생성자 패턴에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-03-14 14:07:33
원래의
1563명이 탐색했습니다.

이번에는 JS Design Pattern Constructor 패턴에 대해 자세히 설명하고, JS Constructor Pattern 사용 시 주의사항 은 무엇인지 살펴보겠습니다.

개념
생성자는 특정 유형의 객체를 생성하는 데 사용됩니다. 사용된 객체를 선언할 뿐만 아니라 생성자는 객체가 처음 생성될 때 객체의 멤버 값을 설정하는 매개변수를 허용할 수도 있습니다. 사용자 정의 유형 개체의 속성 및 메서드를 선언할 수도 있습니다.

역할 및 주의사항

특정 유형의 객체를 생성하는 데 사용됩니다.

객체를 처음 선언할 때 객체에 값을 할당하세요

매개변수를 전달할 수 있고, 생성자를 직접 선언하고, 속성과 메서드를 할당할 수 있습니다.

참고:

new 사용에 주의하세요

와 차이점 싱글톤

기본 사용법
JavaScript에서는 일반적으로 생성자를 인스턴스 구현에 사용하는 것으로 간주합니다. JavaScript에는 클래스 개념이 없지만 특수 생성자가 있습니다. new 작업을 사용하면 JavaScript에 새 개체를 만들고 싶고 새 개체의 멤버가 모두 생성자에 정의되어 있음을 알릴 수 있습니다. 생성자에서 this는 새로 생성된 객체를 가리킵니다. 기본 구문은 다음과 같습니다.

function PersonBir(name, year, month) {
    this.month = month;    this.year = year;    this.name = name;    this.output= function () {
        return this.name + ":" + this.year +"年"+ this.month+"月";
    };
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());1234567891011121314
로그인 후 복사

이것은 함수를 구성하는 가장 간단한 방법이지만 상속할 때 너무 번거롭다고 생각하시나요? 프로토타입을 통해 생성된 객체에 출력 메소드를 추가할 수 있도록 다음 코드를 살펴보세요.

function PersonBir(name, year, month) {
    this.month = month;    this.year = year;    this.name = name;
}
PersonBir.prototype.output=function(){
     return this.name + ":" + this.year +"年"+ this.month+"月";
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());123456789101112
로그인 후 복사

이렇게 출력된 단일 인스턴스를 공유하여 PersonBir 객체 인스턴스에서 사용할 수 있습니다. 생성자 이름을 지정할 때 이 함수를 사용합니다. 일반적인 기능을 구별하기 위해 이름은 대문자로 표현됩니다.

new 연산자 사용 강제
생성자에서 new 연산자 사용을 위해 다음 코드를 살펴보겠습니다. 목적을 달성하기 위해 이 값의 인스턴스가 PersonBir인지 판단하여 new 연산자를 강제로 사용하도록 하겠습니다. .

function PersonBir(name, year, month) {
    //核心代码,如果为假,就创建一个新的实例返回。
    if(!(this instanceof PersonBir)){        return new PersonBir(name, year, month);
    }    this.month = month;    this.year = year;    this.name = name;
}
PersonBir.prototype.output=function(){
     return this.name + ":" + this.year +"年"+ this.month+"月";
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());
로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

js 디자인 패턴 - 싱글턴 패턴 사용

프론트 엔드에서 모듈성을 사용해야 하는 이유는 무엇입니까?

일반적인 CSS 호환성 문제에 대한 솔루션

위 내용은 JS 디자인 패턴의 생성자 패턴에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿