JavaScript_javascript 기술의 클래스에 대한 자세한 소개

JavaScript에서는 클래스를 사용하여 객체 지향 프로그래밍을 구현할 수 있습니다. 그러나 JavaScript의 클래스는 Java의 클래스와 다르며 해당 정의 및 용도도 다릅니다.

JavaScript 클래스 정의

JavaScript에서는 동일한 프로토타입 객체(프로토타입)에서 파생된 모든 객체가 클래스를 형성합니다. 즉, JavaScript의 클래스는 두 객체가 동일한 프로토타입을 가지면 객체 집합의 개념입니다. JavaScript의 클래스에는 클래스 이름도 필요하지 않습니다. 다음 코드를 예로 들어 보겠습니다.

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

var p = {x:42};
var a = Object.create(p);
var b = Object.create(p);
console.log(a === b);//false
console.log(Object.getPrototypeOf(a) === Object.getPrototypeOf(b));//true

위의 예에서 객체 a와 b는 동일한 프로토타입 객체(프로토타입) p를 가지므로 a와 b는 동일한 클래스에 속하며(이 클래스에는 클래스 이름이 없지만) 프로토타입의 값을 상속받습니다. 객체 p는 42 속성 x입니다.

이 예제에서 볼 수 있듯이 프로토타입 객체는 템플릿으로 기능하며, 그로부터 여러 객체가 파생/생성될 수 있습니다. 해당 상태는 Java 언어의 클래스 코드와 동일합니다. . 정의의 핵심. 다음 예제의 프로토타입 객체는 클래스 코드와 더 비슷해 보입니다.

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

var p = {
INCREMENT_BY : 1,
증분 : 함수(x){
x this.INCREMENT_BY;
를 반환합니다. }
}
var a = Object.create(p);
var b = Object.create(p);
console.log(a.increment(7));//8
console.log(b.increment(9));//10

위의 예에서 프로토타입 객체 p는 값이 1인 속성(INCREMENT_BY)과 increment라는 함수를 정의합니다. 객체 a와 b는 템플릿 p에서 INCREMENT_BY 및 증분 함수를 얻습니다. 객체 a 또는 b의 증분 함수를 호출할 때 JavaScript는 a 또는 b의 INCREMENT_BY 값(this.INCREMENT_BY)을 가져오려고 시도합니다. INCREMENT_BY는 p에서 가져오므로 해당 값은 모두 1입니다. Java의 정적 변수와 유사하게 모두 동일한 변수이므로 위의 예에서는 INCREMENT_BY 변수 이름을 지정할 때 모두 대문자가 사용됩니다.

위의 예에서 템플릿 p에서 생성된 모든 개체(동일한 클래스에 속하는 개체)는 정확히 동일한 속성과 동작을 갖습니다. 그러나 실제로는 동일한 클래스의 여러 객체에 대해 클래스에 의해 정의된 속성/동작을 갖는 것 외에도 고유한 속성과 동작을 갖는 경우가 많습니다. 따라서 프로토타입 템플릿을 클래스로 사용해야 하는 경우 프로토타입 템플릿에서 파생된 각 객체를 사용자 정의해야 합니다.

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

var p = {
INCREMENT_BY : 1,
증분 : 함수(x){
x this.INCREMENT_BY this.custom_increment_by;
반환 }
}
var a = Object.create(p);
var b = Object.create(p);
a.custom_increment_by = 0;
b.custom_increment_by = 1;
console.log(a.increment(7));//8
console.log(b.increment(9));//11

이 예에서 템플릿 p에서 생성된 객체 a와 b에는 값이 반드시 서로 같을 필요는 없는 custom_increment_by 변수가 있으며, increment() 함수의 최종 결과는 custom_increment_by 값과 관련됩니다. 일반적으로 새로운 객체의 사용자 정의는 통합된 기능으로 수행되는 경우가 많습니다.

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

var p = {
INCREMENT_BY : 1,
증분 : 함수(x){
x this.INCREMENT_BY this.custom_increment_by;
반환 }
}
함수 getIncrementalClassObject(customIncrementByValue){
var IncrementalObj = Object.create(p);
IncrementObj.custom_increment_by = customIncrementByValue;
IncrementalObj를 반환합니다.
}
var a = getIncrementalClassObject(0);
var b = getIncrementalClassObject(1);
console.log(a.increment(7));//8
console.log(b.increment(9));//11

이런 식으로 클래스의 정의는 프로토타입 객체 p와 getIncrementalClassObject() 함수를 통해 완성됩니다. getIncrementalClassObject() 함수를 호출하여 프로토타입 객체가 p인 객체를 얻을 수 있으며, 이러한 새 객체는 호출 중에 생성될 수 있습니다. getIncrementalClassObject() 함수의 일부를 사용자 정의합니다. 이 정의된 클래스에는 현재 클래스 이름이 없다는 점에 주목할 가치가 있습니다. 설명의 편의를 위해 이를 Incremental이라고 부르겠습니다.

getIncrementalClassObject() 함수에서 수행한 작업을 다시 살펴보면 Incremental 클래스에서 새로운 객체를 생성하는 과정을 보면 다음과 같다.

1. 빈 객체를 만들고 프로토타입 객체를 p로 정의합니다.
2. 다양한 매개변수 값에 따라 새로 생성된 빈 개체를 사용자 정의합니다.
3. 사용자 정의된 새 개체를 반환합니다.

JavaScript에서는 Constructor(생성자)를 사용하여 클래스 정의와 새로운 객체 생성을 빠르게 완료할 수 있습니다.

JavaScript의 생성자

위의 Incremental 클래스 예에서 볼 수 있듯이 새 클래스를 정의하려면 두 부분의 코드가 필요합니다. 즉, 프로토타입 객체를 템플릿으로 생성하고, 새 객체를 생성하는 동안 새 객체를 초기화하는 사용자 정의 함수를 생성하는 것입니다. 클래스는 새 객체의 프로토타입 객체를 지정하고, 새 객체를 사용자 정의/초기화하고, 새 객체를 반환하는 세 가지 프로세스를 거칩니다. JavaScript에서는 이 모든 것이 생성자(생성자)를 통해 수행될 수 있습니다.

JavaScript에서 생성자는 새로운 객체를 초기화하는 기능을 담당하며, 이 생성자 함수의 프로토타입은 새로운 객체를 생성하기 위한 템플릿으로 사용됩니다. 위의 Incremental 클래스를 예로 들어 Constructor를 사용하여 코드를 다시 작성한 후에는 다음과 같습니다.

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

함수 증분(customIncrementByValue){
This.custom_increment_by = customIncrementByValue;
}
Incremental.prototype = {
INCREMENT_BY : 1,
증분 : 함수(x){
x this.INCREMENT_BY this.custom_increment_by;
반환 }
}

var a = 새로운 증분(0);
var b = 새로운 증분(1);
console.log(a.increment(7));//8
console.log(b.increment(9));//11

Constructor 함수를 사용하여 new 키워드를 통해 새로운 객체를 생성하는 과정은 실제로 다음과 같은 단계를 거치게 됩니다.

새 빈 개체를 만듭니다.

1. 이 객체의 프로토타입 객체가 생성자 함수의 프로토타입 속성을 가리키도록 합니다.
2. 이 개체를 이 매개 변수로 사용하여 생성자 함수를 실행합니다.
3. 이는 이전 getIncrementalClassObject() 함수에서 수행된 것과 동일한 작업입니다.

학급명

생성자를 사용하여 객체를 생성할 때 해당 객체에는 "클래스 이름"도 있으며, 이는 instanceof 연산자의 결과에서 확인할 수 있습니다.

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

console.log(Incremental의 인스턴스);//true
console.log(b 인스턴스of증분);//true

그러나 인스턴스 오브 연산자는 객체가 Incremental 생성자에 의해 생성되었는지 여부를 확인하지 않습니다. 인스턴스 오브 연산자는 객체의 프로토타입 객체가 Incremental.prototype인지 여부만 확인합니다. 동일한 프로토타입을 가진 두 개의 생성자가 있는 경우, instanceof 연산자는 객체를 생성하는 데 사용된 생성자를 구별하지 않고 균일하게 true를 반환합니다.

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

함수 Incremental2(customIncrementByValue){
This.custom_increment_by = customIncrementByValue 3;
}
Incremental2.prototype = Incremental.prototype;
console.log(Incremental2의 인스턴스);//true