>웹 프론트엔드 >JS 튜토리얼 >js 객체지향에서 객체를 생성하는 몇 가지 일반적인 방법(팩토리 모드, 생성자 모드, 프로토타입 모드)_javascript 기술

js 객체지향에서 객체를 생성하는 몇 가지 일반적인 방법(팩토리 모드, 생성자 모드, 프로토타입 모드)_javascript 기술

WBOY
WBOY원래의
2016-05-16 15:33:131116검색

지난 기사에서 javascript 객체지향 기본을 소개했습니다. 이 기사에서는 javascript 객체지향에 대해 계속해서 자세히 알아봅니다. JS의 구문은 매우 유연합니다. 간단한 객체 생성을 위해. 이러한 지나치게 유연한 위치는 때때로 혼란스럽기 때문에 오늘은 JS에서 객체를 생성하는 데 일반적으로 사용되는 몇 가지 방법을 정리하겠습니다.

머리말

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

공장 모드

이 패턴은 객체를 생성하는 특정 프로세스를 추상화하고 함수를 사용하여 특정 인터페이스로 객체의 세부 사항을 생성합니다

 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();

공장 모드 테스트

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

생성자 패턴

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();

생성자 패턴 테스트

다음과 같이 생성자가 팩토리 패턴과 약간 다르다는 점에 유의하세요

생성자의 첫 글자는 대문자로 표기

명시적으로 생성된 개체가 없습니다

이 개체에 속성과 메서드 할당

반품문의 불가

이러한 방식으로 생성자를 호출하면 대략 여러 단계를 거칩니다.

새 개체 만들기

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

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

반품 대상

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

 // 调用方式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的作用域

생성자 문제: 생성자 사용의 주요 문제는 각 메서드를 각 인스턴스에서 다시 생성해야 한다는 것입니다. p1과 p2 모두 표시 메서드가 있지만 함수가 안에 있기 때문에 동일한 함수의 인스턴스가 아닙니다. 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

위 내용은 js 객체지향(팩토리 모드, 생성자 모드, 프로토타입 모드)에서 객체를 생성하는 몇 가지 일반적인 방법에 대한 내용입니다. 마음에 드셨으면 좋겠습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.