javascript에서 클래스를 정의하는 방법에 대한 자세한 설명(4가지 방법)

javascript에서 클래스를 정의하는 방법에 대한 자세한 설명(4가지 방법)_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:24:21

원래의

1459명이 탐색했습니다.

이 기사의 예에서는 JavaScript에서 클래스를 정의하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

클래스 정의에는 네 가지 방법이 있습니다.

1. 팩토리 방식

function createCar(name,color,price){
  var tempcar=new Object;
  tempcar.name=name;
  tempcar.color=color;
  tempcar.price=price;
  tempcar.getName=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
  return tempcar;
}
var car1=new createCar("工厂桑塔纳","red","121313");
car1.getName();

로그인 후 복사

특정 유형의 객체를 생성하고 반환할 수 있는 팩토리 함수를 정의합니다. 보기에는 좋아 보이지만 작은 문제가 있습니다.

새로운 함수 showColor는 호출될 때마다 생성되어야 하며 함수 외부로 이동할 수 있습니다.

function getName(){
  document.write(this.name+"-----"+this.color+"<br>");
}

로그인 후 복사

팩토리 기능에서 직접 가리키세요

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

tempCar.getName = getName;

이것은 반복적으로 함수를 생성하는 문제를 피하지만 객체 메서드처럼 보이지는 않습니다.

2. 생성자 방식

function Car(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.getColor=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
}
var car2=new Car("构造桑塔纳","red","121313");
car2.getColor();

로그인 후 복사

첫 번째 방법과 차이점을 보면 생성자 내부에는 객체가 생성되지 않지만 this 키워드가 사용됩니다.

new를 사용하여 생성자를 호출하면 먼저 객체가 생성된 다음 이를 사용하여 액세스됩니다.

이 사용법은 다른 객체지향 언어와 매우 유사하지만, 이 방법은 함수를 반복적으로 생성한다는 이전 방법과 동일한 문제가 있습니다.

3. 프로토타입 제작 방법

function proCar(){
}
proCar.prototype.name="原型";
proCar.prototype.color="blue";
proCar.prototype.price="10000";
proCar.prototype.getName=function(){
  document.write(this.name+"-----"+this.color+"<br>");
};
var car3=new proCar();
car3.getName();

로그인 후 복사

먼저 코드 없이 Car 생성자를 정의한 후 프로토타입을 통해 속성을 추가합니다. 장점:

a. 모든 인스턴스는 showColor에 대한 포인터를 저장하여 반복적으로 함수를 생성하는 문제를 해결합니다

b.instanceof를 사용하여 객체 유형을 확인할 수 있습니다

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

alert(car3 instanceof proCar);//true

단점, 다음 코드를 추가하세요:

proCar.prototype.drivers = newArray("mike", "sue");
car3.drivers.push("matt");
alert(car3.drivers);//outputs "mike,sue,matt"
alert(car3.drivers);//outputs "mike,sue,matt"

로그인 후 복사

드라이버는 Array 객체에 대한 포인터이며 proCar의 두 인스턴스는 모두 동일한 배열을 가리킵니다.

4. 동적 프로토타입 방식

function autoProCar(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.drives=new Array("mike","sue");
  if(typeof autoProCar.initialized== "undefined"){
   autoProCar.prototype.getName =function(){
   document.write(this.name+"-----"+this.color+"<br>");
   };
   autoProCar.initialized=true;
  }
}
var car4=new autoProCar("动态原型","yellow","1234565");
car4.getName();
car4.drives.push("newOne");
document.write(car4.drives);

로그인 후 복사

이 방법은 제가 가장 좋아하는 방법입니다. 모든 클래스 정의는 다른 언어의 클래스 정의와 매우 유사합니다. 함수는 반복적으로 생성되지 않습니다.

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.