JavaScript가 팩토리 모드, 생성자 모드 및 프로토타입 모드를 사용하여 객체 인스턴스를 생성하는 방법에 대한 자세한 설명

객체 생성자를 사용하거나 객체 리터럴을 사용하는 것이 객체를 생성하는 데 매우 편리할 수 있지만 이 방법에는 분명한 단점이 있습니다. 인터페이스를 사용하여 여러 객체를 생성하면 중복되는 코드가 많이 생성됩니다. 따라서 이 문제를 해결하기 위해 사람들은 공통 객체에 다음과 같은 방법을 사용하기 시작했습니다.

Factory 패턴

이 패턴은 객체를 생성하는 특정 프로세스를 추상화하며, 특정 인터페이스가 있는 객체의 세부 정보를 생성하는 함수를 사용합니다.

 function cPerson(name,sex,age){
 var o = new Object();
 o.name = name;
 o.sex = sex;
 o.age = age;
 o.show = function(){
 console.log(this.name,this.age,this.sex);
 }
 return o;
}
 var p1 = cPerson('龙','男','100');
 p1.show();
 var p2 = cPerson('田','女','14');
 p2.show();

Factory 패턴 테스트

팩토리 접근 방식의 문제점: 사용 팩토리 패턴 모든 정보를 포함하는 객체를 생성할 수 있으며 이 함수는 셀 수 없이 호출될 수 있습니다. 유사한 객체를 여러 개 생성하는 문제는 해결하지만 객체 인식 문제(즉, 객체의 유형을 아는 방법)는 해결하지 못합니다.

생성자 패턴

function CPerson(name,sex,age) {//注意这里 构造函数首字母大写
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.show = function () {
 console.log(this.name, this.age, this.sex);
 }
}
var p1 = new CPerson('龙','男','100');
 p1.show();
var p2 = new CPerson('田','女','14');
 p2.show();

생성자 패턴 테스트

다음과 같이 생성자는 팩토리 패턴과 약간 다릅니다.

생성자의 첫 글자는 대문자로 시작됩니다.

객체는 명시적으로 생성되지 않습니다.

이 객체에는 속성과 메서드가 할당됩니다.

없음 return 문

그리고 이런 식으로 생성자를 호출하려면 대략 여러 단계를 거치게 됩니다

새 객체를 만듭니다

생성자의 범위를 이 객체에 할당합니다(그래서 이것이 이 객체를 가리킵니다)

코드를 실행합니다 생성자에서(즉, 새 개체에 속성과 메서드를 추가하는 프로세스)

객체 반환

참고: 생성자는 실제로 일반 함수와 크게 다르지 않습니다. 유일한 차이점은 호출 방식입니다. 다음은 여러 가지 호출 방법을 보여줍니다.

 // 调用方式1 new 方式
 var p1 = new CPerson('龙','男','100');
 p1.show();//龙 100 男
 // 调用方式2 普通函数调用
 CPerson('龙','男','100');
 window.show()//龙 100 男 注意属性和方法会被设置到window对象上
 // 调用方式3 在另一个对象的作用域中调用
 var obj = new Object();
 CPerson.call(obj,'龙','男','100');
 obj.show(); //龙 100 男 在obj的作用域

생성자 사용의 주요 문제는 각 인스턴스에서 각 메서드를 다시 만들어야 한다는 것입니다. 그러나 이는 show 메서드의 인스턴스가 아닙니다. 함수, 함수도 js의 객체이기 때문입니다. 따라서 공유된 표시 방법은 동일하지 않습니다.

프로토타입 패턴

모든 함수에는 객체를 가리키는 포인터인 프로토타입 속성이 있습니다. 이 객체의 목적은 특정 유형의 모든 인스턴스에서 공유할 수 있는 속성과 메서드를 포함하는 것입니다. 즉, 생성자를 호출하여 생성된 객체의 프로토타입 객체입니다. 객체의 모든 인스턴스가 해당 속성을 공유할 수 있다는 장점이 있습니다. 즉, 생성자

 function CPerson(){
}
CPerson.prototype.name='龙';
CPerson.prototype.sex='男';
CPerson.prototype.age=100;
CPerson.prototype.show=function(){
 console.log(this.name, this.age, this.sex);
}
var p1 = new CPerson();
 p1.show(); //龙 100 男
var p2 = new CPerson();
 p2.show();//龙 100 男
 console.log(p1.show == p2.show)//true

에서 인스턴스 정보를 정의할 필요가 없습니다.

위 내용은 JavaScript가 팩토리 모드, 생성자 모드 및 프로토타입 모드를 사용하여 객체 인스턴스를 생성하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!