함수를 통해 JavaScript에서 클래스 인스턴스를 정의하는 방법에 대한 자세한 설명

먼저 예를 들어 설명하겠습니다.

function myClass() 
{ 
var id = 1; 
var name = "johnson"; 
//properties 
this.ID = id; 
this.Name = name; 
//method 
this.showMessage = function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 
} 
var obj1 = new myClass(); 
var obj2 = new myClass();

함수의 정의는 실제로 클래스의 생성자와 동일하며 마지막 두 문장은 이 클래스의 인스턴스를 만드는 것입니다. 먼저 첫 번째 문장을 분석해 보겠습니다. var obj1 = new myClass(); 클래스의 인스턴스를 생성하기 위해 new를 사용할 때 인터프리터는 먼저 빈 객체를 생성합니다. 그런 다음 이 myClass 함수를 실행하고 이 포인터가 이 클래스의 인스턴스를 가리키도록 합니다. this.ID = id; 및 this.Name = name; 및 this.showMessage = function(){...}이 발생하면 이 두 속성과 이 메서드가 생성되고 변수 id와 name이 정의됩니다. 값 수준 함수는 이 두 속성과 이 함수 개체(shwoMessage)에 할당됩니다. 이 프로세스는 C#의 생성자와 유사하게 개체를 초기화하는 것과 동일합니다. 마지막으로 new는 이 객체를 반환합니다. 두 번째 문장을 보십시오. var obj2 = new myClass(); 실행 프로세스는 이전 문장과 동일합니다. 즉, 빈 객체를 만든 다음 myClass 함수를 실행하고 두 개의 속성과 메서드를 정의합니다.
위 분석에서 알 수 있듯이 위의 클래스 구현 방법은 함수 정의에서 클래스의 속성 메서드를 정의하는 것입니다. 단점이 있습니다. 위에 표시된 것처럼 이 클래스의 인스턴스를 두 개 이상 생성해야 하는 경우 이러한 속성은 여러 번 생성됩니다.
그러면 이런 상황을 피하는 방법은 무엇일까요? 프로토타입은 이름과 같은 프로토타입입니다. 각 함수에는 실제로 이 함수 개체의 멤버 컬렉션을 나타내는 하위 개체 프로토타입이 있습니다. 여기서는 클래스를 구현하기 위해 함수를 사용하므로 프로토타입은 실제로 클래스라고 말할 수 있습니다. 회원의. 프로토타입에 의해 정의된 속성과 메서드는 함수 생성자가 실행되기 전에 실행됩니다. 따라서 객체가 새로 생성되기 전에 프로토타입의 멤버가 실제로 실행되었습니다. 먼저 예제를 살펴보겠습니다.

function myClass() 
{ 
//构造函数 
} 
myClass.prototype = 
{ 
ID: 1, 
Name: "johnson", 
showMessage: function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 
} 
var obj1 = new myClass(); 
var obj2 = new myClass();

클래스의 구조는 여전히 이전 예제와 동일하지만 여기서는 프로토타입을 사용하여 구현됩니다. 먼저 마지막 두 문장을 살펴보겠습니다. 앞서 언급했듯이 프로토타입은 함수 생성자 이전에 실행됩니다. 즉, var obj1 = new myClass();가 실행되기 전에 이 클래스에는 이미 ID, Name 속성 및 showMessage 메서드가 있습니다. 실행자가 문장을 작성할 때 실행 프로세스는 다음과 같습니다. 이전 예제와의 비교에 유의하세요. 먼저 빈 개체를 만들고 이 개체를 가리키는 this 포인터입니다. 그런 다음 함수 프로토타입 객체의 모든 멤버를 이 객체에 할당합니다(이러한 멤버는 다시 생성되지 않습니다). 그런 다음 함수 본문을 실행합니다. 마지막으로 new는 이 객체를 반환합니다. 다음 문장을 실행하는 경우: 이 프로세스도 실행되며 이러한 멤버는 반복적으로 생성되지 않습니다.
위 코드는 단지 예시일 뿐이며, 실제 프로젝트에서는 클래스에 많은 구성원이 있을 수 있으며, 많은 수의 인스턴스를 생성해야 할 수도 있습니다. 이 프로토타입은 그 우수성을 보여줄 것입니다. 또한 위 코드는 중괄호 구문을 사용하여 프로토타입의 멤버를 정의하므로 코드가 더 명확해 보입니다. 이는 권장되는 클래스 디자인 패턴입니다. 물론 많은 프로젝트에서 더 나은 모델을 찾을 수도 있습니다. 또한 더 최적화된 JavaScript 프로그래밍 모델을 통해 새로운 모델을 계속 도입할 수 있기를 바랍니다. 또한 시간이 지남에 따라 모든 주요 브라우저에서도 JavaScript 구문 분석이 표준화되기를 바랍니다. .
위에서 언급했듯이 프로토타입에서 정의한 멤버는 생성자보다 먼저 발생합니다. 위의 예에서 생성자가 비어 있음을 증명할 수 있습니다. 생성자에 실행 시 var obj1 = new myClass();, 올바른 속성 값을 보여주는 팝업 대화 상자가 표시됩니다.
다음 코드:

function subClass(){ } 
subClass.prototype = 
{ 
Name: "sub" 
} 
function myClass() 
{ 
//构造函数 
} 
myClass.prototype = 
{ 
ID: 1, 
Name: "johnson", 
SubObj: new subClass(), 
showMessage: function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name + "SubObj.Name:" + this.SubObj.Name); 
} 
} 
var obj1 = new myClass(); 
obj1.SubObj.Name = "XXX"; 
obj1.showMessage(); 
var obj2 = new myClass(); 
obj2.showMessage();

여기서 myClass에 참조 유형이 정의되어 있으며 해당 유형은 우리가 사용자 정의한 하위 클래스 클래스입니다. 이 하위 클래스에는 Name 속성이 있습니다. 위의 분석에 따르면 프로토타입 객체가 공유되므로 var obj1 = new myClass();를 실행할 때 myClass 프로토타입의 멤버가 이 obj1 인스턴스에 복사됩니다. 그러나 여기서 SubObj는 참조 유형입니다. var obj2 = new myClass();가 실행되면 프로토타입의 ID 및 Name 멤버는 obj2에 복사되지만 SubObj 속성은 복사되지 않지만 프로토타입에서 참조됩니다. . SubObj. 이전 문장에서 obj1.Subobj.Name의 값을 수정했기 때문에 new를 사용하여 obj2 인스턴스를 생성할 때 수정된 값이 참조됩니다.
그래서 프로토타입을 사용하여 클래스를 정의할 때 생성자에서 속성을 정의하고 생성자의 프로토타입에서 메서드를 정의해야 합니다. 다음과 같습니다:

function myClass(id, name) 
{ 
this.ID = id; 
this.Name = name; 
} 
myClass.prototype = 
{ 
showMessage: function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
}, 
showMessage2: function() 
{ 
alert("Method2"); 
} 
} 
var obj1 = new myClass(1, "johnson"); 
obj1.showMessage(); 
obj1.Name="John"; 
obj1.showMessage(); 
var obj2 = new myClass(2, "Amanda"); 
obj2.showMessage();

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