JS에서 클래스를 정의하는 방법에 대한 설명

亚连
풀어 주다: 2018-05-17 09:54:41
원래의
1308명이 탐색했습니다.

JS에서 클래스를 정의하는 방법은 여러 가지가 있습니다.

1. 팩토리 메소드

  function Car(){ 
   var ocar = new Object; 
   ocar.color = "blue"; 
   ocar.doors = 4; 
   ocar.showColor = function(){ 
    document.write(this.color) 
   }; 
   return ocar; 
  } 
  var car1 = Car(); 
  var car2 = Car();
로그인 후 복사

이 함수가 호출되면 새 객체가 생성되고 모든 속성 및 메소드가 부여됩니다. 이 기능을 사용하여 정확히 동일한 속성을 가진 2개의 개체를 만듭니다. 물론 내 여동생이 매개변수를 전달하여 이 메서드를 수정할 수 있습니다.

  function Car(color,door){ 
   var ocar = new Object; 
   ocar.color = color; 
   ocar.doors = door; 
   ocar.showColor = function(){ 
    document.write(this.color) 
   }; 
   return ocar; 
  } 
  var car1 = Car("red",4); 
  var car2 = Car("blue",4); 
  car1.showColor()  //output:"red" 
  car2.showColor()  //output:"blue"
로그인 후 복사

이제 함수에 다양한 매개변수를 전달하여 다양한 값을 가진 객체를 얻을 수 있습니다.
이전 예에서 showcolor()는 Car() 함수가 호출될 때마다 생성되어야 하며, 이는 각 객체가 고유한 showcolor() 메서드를 가지고 있음을 의미합니다.

하지만 사실 각 개체는 동일한 기능을 공유합니다.
함수 외부에서 메서드를 정의한 다음 함수의 속성을 메서드에 지정하는 것도 가능합니다.

 function showColor(){ 
   alert(this.color); 
  } 
  function Car(){ 
   var ocar = new Object(); 
   ocar.color = color; 
   ocar.doors = door; 
   ocar.showColor = showColor; 
   return ocar; 
  }
로그인 후 복사

하지만 이건 함수 메소드처럼 보이지 않습니다.
2. 생성자 메서드
생성자 메서드는 아래와 같이 팩토리 메서드만큼 간단합니다.

function Car(color,door){ 
   this.color = color; 
   this.doors = door; 
   this.showColor = function(){ 
    alert(this.color) 
   }; 
  } 
  var car1 = new Car("red",4); 
  var car2 = new Car("blue",4);
로그인 후 복사

생성자 메서드는 함수 내부에서 객체를 생성하지 않고 this 키워드를 사용하는 것을 볼 수 있습니다. 왜냐하면 생성자가 호출될 때 객체가 생성되었고, 이것만 함수 내부의 객체 속성에 접근하는 데 사용될 수 있기 때문입니다.
이제 new를 사용하여 개체를 만들면 이렇게 보입니다! 그러나 이는 공장 접근 방식과 동일합니다. 각 호출은 객체에 대한 자체 메서드를 생성합니다.
3. 프로토타입 방법
이 방법은 객체의 프로토타입 속성을 사용합니다. 클래스 이름은 먼저 빈 함수로 생성된 다음 모든 속성과 메서드에 프로토타입 속성이 할당됩니다.

  function Car(){ 
  } 
  Car.prototype.color = "red"; 
  Car.prototype.doors = 4; 
  Car.prototype.showColor = function(){ 
   alert(this.color); 
  } 
  var car1 = new Car(); 
  var car2 = new Car();
로그인 후 복사

이 코드에서는 먼저 빈 함수를 정의한 후 프로토타입 속성을 통해 객체의 속성을 정의합니다. 이 함수가 호출되면 프로토타입의 모든 속성이 생성될 객체에 즉시 할당됩니다. 이 함수의 모든 객체는 showColor()에 대한 포인터를 저장하며 구문상 모두 동일한 객체에 속하는 것으로 나타납니다.
하지만 이 함수에는 매개변수가 없으며 매개변수를 전달하여 속성을 초기화할 수 없습니다. 속성의 기본값은 객체 생성 후 변경되어야 합니다.
프로토타입 메서드의 매우 심각한 문제는 속성이 배열과 같은 객체를 가리키는 경우입니다.

  function Car(){ 
  } 
  Car.prototype.color = "red"; 
  Car.prototype.doors = 4; 
  Car.prototype.arr = new Array("a","b"); 
  Car.prototype.showColor = function(){ 
   alert(this.color); 
  } 
  var car1 = new Car(); 
  var car2 = new Car(); 
  car1.arr.push("cc"); 
  alert(car1.arr);  //output:aa,bb,cc 
  alert(car2.arr);  //output:aa,bb,cc
로그인 후 복사

여기서 배열의 reference 값으로 인해 Car의 두 객체가 동일한 배열을 가리키므로 car1에 값을 추가하면 car2에서도 볼 수 있습니다.
Union은 다른 프로그래밍 언어와 마찬가지로 생성자/프로토타입 메서드를 사용하여 객체를 생성하는 방법으로, 객체의 비함수적 속성을 정의하는 데 생성자를 사용하고, 객체를 정의하는 데 프로토타입 메서드를 사용합니다.

 function Car(color,door){ 
   this.color = color; 
   this.doors = door; 
   this.arr = new Array("aa","bb"); 
  } 
  Car.prototype.showColor(){ 
   alert(this.color); 
  } 
  var car1 = new Car("red",4); 
  var car2 = new Car("blue",4); 
  car1.arr.push("cc"); 
  alert(car1.arr);  //output:aa,bb,cc 
  alert(car2.arr);  //output:aa,bb
로그인 후 복사

5. 동적 프로토타입 방법
동적 프로토타입 방법의 원리는 혼합 생성자/프로토타입 방법과 유사합니다. 유일한 차이점은 객체 메서드가 할당되는 위치입니다.

  function Car(color,door){ 
   this.color = color; 
   this.doors = door; 
   this.arr = new Array("aa","bb"); 
   if(typeof Car._initialized == "undefined"){ 
    Car.prototype.showColor = function(){ 
     alert(this.color); 
    }; 
    Car._initialized = true; 
   } 
  }
로그인 후 복사

동적 프로토타입 메서드는 플래그를 사용하여 메서드가 프로토타입에 할당되었는지 여부를 확인합니다. 이렇게 하면 메소드가 한 번만 생성됩니다.
6. 혼합 팩토리 메소드
이 메소드의 목적은 가짜 생성자를 생성하고 다른 객체의 새 인스턴스만 반환하는 것입니다.

 function Car(){ 
   var ocar = new Object(); 
   ocar.color = "red"; 
   ocar.doors = 4; 
   ocar.showColor = function(){ 
    alert(this.color) 
   }; 
   return ocar; 
  }
로그인 후 복사

팩토리 메소드와의 차이점은 이 메소드는 newoperator를 사용한다는 것입니다.
위의 내용은 모두 객체를 생성하는 방법입니다. 현재 가장 널리 사용되는 방법은 생성자/프로토타입 혼합 방법이며, 동적 프로토타입 방법도 매우 널리 사용됩니다. 기능적으로 생성자/프로토타입 접근 방식과 동일합니다.

관련 기사:

JavaScript의 기본 구문 및 변수 설명

js에서 기본적이고 일반적으로 사용되는 몇 가지 메서드에 대한 설명

js의 기본 구문에 대한 자세한 답변

위 내용은 JS에서 클래스를 정의하는 방법에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!