이번에는 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 디자인 패턴의 생성자 패턴에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!