JavaScript 팩토리 패턴, 프로토타입 패턴, 생성자 패턴
- 小云云원래의
- 2018-03-17 14:52:511195검색
1. 패턴이란 무엇인가요? 패턴은 재사용 가능한 솔루션인 반면, 안티패턴은 특정 문제에 대한 잘못된 솔루션입니다.
js 안티 패턴의 일반적인 예
① 함수 대신 setTimeout 및 setInterval에 문자열을 전달하면 eval()의 내부 사용이 트리거됩니다.
②전역 컨텍스트에서 많은 수의 변수를 정의하면 전역 네임스페이스가 오염됩니다.
③Object 클래스의 프로토타입 수정
④ 인라인 형식으로 js를 사용하면 HTML 파일에 포함된 js 코드를 외부 단위 테스트 도구에 포함할 수 없습니다.
⑤ document.write 남용. 페이지가 로드된 후 document.write가 실행되면 현재 있는 페이지를 다시 작성하게 됩니다. 대신 document.creatElement를 사용할 수 있다면 document.write를 사용하지 마십시오.
2. 디자인 패턴의 카테고리
(1).팩토리 패턴(단순 및 복잡)
간단히 말하면, 간단한 팩토리 패턴은 그 역할을 이해하기 쉽습니다. 일부 객체를 캡슐화하고 많은 공간을 차지하는 일부 반복 코드를 캡슐화하는 지향적 방법. 구현 방법은 매우 간단합니다. 즉, 함수 내에서 객체를 생성하고 객체에 속성과 메소드를 할당한 다음 객체를 반환합니다. 이 방법은 인스턴스화된 객체의 대량 중복 문제를 해결하는 것입니다.
function creatper(name,age){
var per=new Object(); //原料
//加工
per.name=name;
per.age=age;
per.sayHi=function(){
console.log(per.name+'已经有'+per.age+"岁");
}
return per; //出厂
}
var test1=creatper('lili',22);
var test2 =creatper('mike',25);//第二个实例
test1.sayHi();
test2.sayHi();
console.log(test1.name);팩토리 모드를 사용하면 함수별로 이것을 반복적으로 호출하여 서로 다른 속성 값을 가진 객체를 생성할 수 있음을 알 수 있습니다. 이는 공장과 마찬가지로 대량 생산, 원자재, 가공 및 배송이 모두 매우 명확합니다. . 그러나 팩토리 패턴은 날짜, 배열 등과 달리 모두 객체이기 때문에 객체 유형을 식별할 수 없다는 것을 알게 될 것입니다.
팩토리 패턴은 언제 사용하나요?
Factory 패턴은 주로 다음과 같은 시나리오에서 사용됩니다.
1 개체 또는 구성 요소가 매우 복잡할 때
② 다양한 환경에 따라 개체의 다른 인스턴스를 쉽게 생성해야 하는 경우
3 공유하는 많은 작은 개체를 처리할 때 동일한 속성 또는 구성 요소 시간
(2). 생성자(Constructor) 패턴
Constructor(생성자 메서드)는 ECMAScript에서 특정 객체를 생성하는 데 사용할 수 있습니다. 이 모드는 위의 팩토리 모드가 객체 인스턴스를 식별할 수 없는 문제를 해결할 수 있습니다.
function Student(name,age,classa){//构造函数模式
this.name = name;
this.age = age;
this.classa = classa;
this.run = function () {
console.log(this.name+ this.age+ "岁上"+this.classa +"！");
}
}
var Benz = new Student('Lili',22,'初三');
var BMW = new Student("Mike",25,"初一");
console.log(Benz instanceof Student); //很清晰的识别他从属于Student
Benz.run();
BMW.run();팩토리 모드의 다른 함수 이름을 제외하고는 a. 생성자 메서드가 객체를 명시적으로 생성하지 않고(new Object()) b. 직접 속성을 할당하는 것을 코드에서 볼 수 있습니다. 이 객체에는 return 문이 없습니다. 객체를 인식하는 능력(생성자 패턴이 팩토리 패턴보다 성능이 뛰어난 경우) . 참고: 생성자 메서드 사양: 1. 함수 이름과 인스턴스화 생성자 이름이 동일하고 대문자로 표시됩니다. 2. 생성자를 통해 객체를 생성하려면 new 연산자를 사용해야 합니다.
객체는 생성자를 통해 생성될 수 있으므로 이 객체는 어디에서 왔으며 new Object()는 어디에서 실행됩니까? 실행 프로세스는 다음과 같습니다.1. 생성자가 사용되면 new Object()가 백그라운드에서 실행됩니다.
2 생성자의 범위를 새 개체에 지정합니다. Object() 생성된 객체)이며 함수 본문의 this는 new Object()에 의해 생성된 객체를 나타냅니다.
3. 생성자에서 코드를 실행합니다.
function Per(){}
Per.prototype.name='小米';
Per.prototype.age=22;
Per.prototype.course=['php','javascript','java','C#'];
Per.prototype.say=function(){
console.log(this.name+"有"+this.age+"岁，学习了"+this.course+"等课程。");
}
var per1=new Per();
var per2=new Per();
per1.name='小林';
per1.course.push('Html5');
per1.say();
per2.say();
per2.course.pop(); 프로토타입 패턴의 단점은 초기화 매개변수를 전달하는 생성자를 생략하는 것 또한 당연하다고 생각합니다. 결과적으로 모든 인스턴스는 기본적으로 동일한 속성 값을 얻습니다. 나중에 변경이 가능하지만 전혀 불편하지 않습니다. 프로토타입 패턴의 가장 큰 문제는 공유로 인해 한 인스턴스가 참조를 수정하므로 발생합니다. 속성을 변경합니다. 따라서 프로토타입 모드는 일반적으로 단독으로 사용되지 않습니다. (4). 프로토타입이 있는 생성자 = 프로토타입 패턴 + 생성자 패턴 function Per(name,age,course){
this.name=name;
this.age=age;
this.course=course;
}
Per.prototype.say=function(){
console.log(this.name+"有"+this.age+"岁，学习了"+this.course+"等课程。");
}
var per1=new Per('Make',22,['C#','java','PHP','Javascript']);
var per2=new Per('小高',21,['oracle','mysql','nodejs','html5']);
per1.say();//Make有22岁，学习了C#,java,PHP,Javascript等课程。
per2.say();//小高有21岁，学习了oracle,mysql,nodejs,html5等课程。
per1.course.pop();
per1.say();//Make有22岁，学习了C#,java,PHP等课程。
per2.say();//小高有21岁，学习了oracle,mysql,nodejs,html5等课程。 위 분석: 생성자는 인스턴스의 속성을 정의하는 데 사용되는 반면 프로토타입 패턴은 메서드 및 일부 공유 속성을 정의하는 데 사용됩니다. 각 인스턴스에는 고유한 속성이 있지만 동시에 방법을 공유하여 메모리를 최대한 절약합니다. 또한 이 모드는 초기 매개변수 전달도 지원합니다. 가장 널리 사용됩니다. 관련 추천:
JS 디자인 패턴의 프로토타입 모드에 대한 자세한 설명
위 내용은 JavaScript 팩토리 패턴, 프로토타입 패턴, 생성자 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!