JavaScript 고급 프로그래밍 읽기 노트(13) 클래스 또는 객체의 js 정의

JavaScript 고급 프로그래밍 읽기 노트(13) 클래스 또는 객체의 js 정의_javascript 기술

WBOY

풀어 주다： 2016-05-16 17:51:03

원래의

988명이 탐색했습니다.

팩토리 메소드

특정 유형의 객체를 생성하고 반환합니다.

코드 복사 코드는 다음과 같습니다.

 
function createCar(sColor,iDoors ,iMpg) { 
var oTempCar=new Object(); 
oTempCar.color=sColor; 
oTempCar.mpg=iMpg; (){ 
alert(this.color); 
} 
return oTempCar; 
} 

 
　 호출 예: 

코드 복사 코드는 다음과 같습니다.

var oCar1=createCar("red",4,23)

var oCar2= createCar("blue", 3,25); 
oCar1.showColor(); 
oCar2.showColor(); 

 
 단점: 메서드가 반복적으로 생성됩니다. 위의 호출 예에서와 같이 oCar1과 oCar2에는 모두 자체 shoColor 메서드가 있지만 공유할 수 있습니다. 

생성자 방법

예:

코드 복사 코드는 다음과 같습니다.

function Car(sColor,iDoors,iMpg){

this.color=sColor 
this.door=iDoors 
this.mpg; =iMpg ; 
this.showColor=function(){ 
alert(this.color); 
} 
} 

 
　 호출 예: 

코드 복사 코드는 다음과 같습니다.

var oCar1=new Car("red",4,23);

var oCar2 =new Car("blue",3,25); 

 단점: 팩토리 메소드와 마찬가지로 메소드가 반복적으로 생성됩니다.

프로토타입 방법
이 방법은 객체의 프로토타입 속성을 사용하는데, 이는 새로운 객체를 생성하는 프로토타입이라고 할 수 있습니다. 여기서는 빈 생성자를 사용하여 클래스 이름을 설정한 후 모든 속성과 메서드를 프로토타입 속성에 직접 할당합니다. 이전 예제를 다시 작성하면 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

function Car(){

} 

Car. 프로토타입.color="red"; 
Car.prototype.doors=4; 
Car.prototype.mpg=23; 
Car.prototype.showColor(){ 
alert(this. color); 
} 
 
 

전화:

코드 복사

var oCar1=new Car();

var oCar2=new Car() 

 단점: 속성 값을 초기화할 수 없습니다. 생성자에 매개변수 전달

혼합 생성자/프로토타입 메서드
생성자와 프로토타입 메서드를 함께 사용하는 경우 예는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

function Car(sColor,iDoors,iMpg){

this.color=sColor; 
this.door=iDoors; 
this.mpg=iMpg; 
} 

Car.prototype.showColor(){ 
경고( this.color); 

 
 호출 예: 

코드 복사 다음과 같습니다: var oCar1=new Car("red",4, 23)

var oCar2=new Car("blue",3,25); >

 장점: 메모리 낭비가 없고 생성이 쉽습니다. 

 이 메소드는 ECMAScript에서 주로 사용하는 메소드입니다. 

동적 프로토타입 방법

생성자/프로토타입 방법을 혼합하여 객체의 메소드를 객체 외부에 정의함으로써 사람들이 시각적으로 객체 지향적이지 않고 시각적으로 캡슐화가 잘되어 동적 프로토타입 메소드가 생성됩니다.

코드 복사

코드는 다음과 같습니다. function Car(sColor,iDoors,iMpg){ this.color=sColor; this.door=iDoors;

this.mpg=iMpg; _initialized=="undefine"){

Car.prototype.showColor=function(){ 
alert(this.color) 
}; 
Car._initialized=true; 🎜>} 

 
저자: Artwl 
출처: http://artwl.cnblogs.com