JavaScript_javascript 팁의 클래스 상속-JS 튜토리얼-php.cn

DouglasCrockford
www.crockford.com

And you think you're so clever and classless and free
--John Lennon

JavaScript一种没有类的，面向对象的语言，它使用原型继承来代替类继承。这个可能对受过传统的面向对象语言（如C++和Java）训练的程序员来说有点迷惑。JavaScript的原型继承比类继承有更强大的表现力，现在就让我们来看看。

Java	JavaScript
强类型	弱类型
静态	动态
基于类	基于原型
类	函数
构造器	函数
方法	函数

먼저, 우리는 왜 상속에 그토록 관심을 두는 걸까요? 두 가지 주요 이유가 있습니다. 첫 번째는 유형에 유리한 것입니다. 언어 시스템이 유사 유형 참조 변환cast을 자동으로 수행할 수 있기를 바랍니다. 프로그램이 개체 참조를 명시적으로 변환하도록 요구하는 형식 시스템에서 작은 형식 안전성을 얻을 수 있습니다. 이는 강력한 형식의 언어에서 가장 중요한 점이지만, 클래스 참조에 캐스팅이 필요하지 않은 JavaScript와 같은 약한 형식의 언어와는 아무런 관련이 없습니다.

두 번째 이유는 코드 재사용입니다. 프로그램에서 많은 개체가 동일한 메서드를 구현하는 경우가 종종 있습니다. 클래스를 사용하면 단일 정의 세트로 객체를 생성할 수 있습니다. 객체가 다른 객체에 포함된 객체를 포함하는 것도 일반적이지만 차이점은 소수의 메서드를 추가하거나 수정한 것뿐입니다. 클래스 상속은 이를 위해 매우 유용하지만 프로토타입 상속은 훨씬 더 유용합니다.

이를 보여주기 위해 일반 수업 언어처럼 코드를 작성할 수 있는 작은 "최적의 장소"를 소개하겠습니다. 그런 다음 클래스 언어에서는 찾을 수 없는 몇 가지 유용한 패턴을 보여줍니다. 마지막으로 이 '디저트'에 대해 설명하겠습니다.
클래스 상속
먼저 멤버 값에 대한 get 및 set 메서드와 값을 괄호로 묶는 toString 메서드가 있는 Parenizor 클래스를 만듭니다.

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

 
function Parenizor(value) { 
 this.setValue (값); 
} 
Parenizor.method('setValue', function (값) { 
this.value = value; 
return this; 
}); >Parenizor.method('getValue', function () { 
return this.value; 
}) 
Parenizor.method('toString', function () { 
return '(' this .getValue( ) ')'; 
}); 

 

이 구문은 유용하지 않을 수 있지만 클래스의 형태를 보면 쉽습니다. 메소드 메소드는 메소드 이름과 함수를 취해 이를 클래스에 공개 메소드로 넣습니다.
이제

코드를 복사할 수 있습니다. 코드는 다음과 같습니다.

myParenizor = new Parenizor( 0); 
myString = myParenizor.toString();

예상대로 myString은 "(0)"입니다.
이제 Parenizor에서 상속되는 또 다른 클래스를 생성하겠습니다. 값이 0이거나 비어 있으면 toString 메서드가 "-0-"을 생성한다는 점을 제외하면 기본적으로 동일합니다.

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

function ZParenizor(value) { 
 this.setValue (값); 
} 
ZParenizor.inherits(Parenizor); 
ZParenizor.method("e;toString"e;, function () { 
if (this.getValue() ) { 
return this.uber('toString'); 
return "-0-"; 
}) 

 
상속 방법은 다음과 유사합니다. Java의 확장입니다. uber 방법은 Java의 super와 유사합니다. 메소드 호출을 상위 클래스의 메소드로 만듭니다(예약어와의 충돌을 피하기 위해 이름이 변경됨). 

이렇게 작성하면 됩니다

코드를 복사하세요 코드는 다음과 같습니다.

myZParenizor = new ZParenizor( 0);

myString = myZParenizor.toString(); 

이번에는 myString이 "-0-"입니다.

JavaScript에는 클래스가 없습니다. 하지만 우리는 프로그래밍 방식으로 이 목적을 달성할 수 있습니다.
다중 상속
함수의 프로토타입 객체를 조작하여 다중 상속을 구현할 수 있습니다. 혼합 다중 상속은 구현하기 어렵고 이름 충돌의 위험이 있습니다. JavaScript에서 혼합 다중 상속을 구현할 수 있지만 이 예에서는 스위스 상속이라는 보다 표준화된 형식을 사용합니다.
값이 지정된 범위 내에 있는지 확인하는 setValue 메서드가 있는 NumberValue 클래스가 있다고 가정합니다. 내부에서 적절한 경우 예외를 발생시킵니다. ZParenizor에 대한 setValue 및 setRange 메소드만 있으면 됩니다. 우리는 확실히 toString 메소드를 원하지 않습니다.

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

ZParenizor. 스위스(NumberValue, 'setValue', 'setRange')

필수 메소드만 추가됩니다.
기생 상속
이는 ZParenizor 클래스를 작성하는 또 다른 방법입니다. Parenizor를 상속받지 않고 Parenizor 생성자를 호출하는 생성자를 작성하고 결과를 수정한 후 최종적으로 결과를 반환합니다. 이 생성자는 공용 메서드가 아닌 권한 있는 메서드를 추가합니다.

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

 
function ZParenizor2(value) { 
 var self = new Parenizor(value); 
self.toString = function () { 
if (this.getValue()) { 
return this.uber('toString') 
} 
return "-0-" 
}; 
return self; 
} 

클래스 상속은 "is..." 관계인 반면, 기생 상속은 관계입니다. "원래는 그랬고 지금은..." 관계에 대해. 생성자는 객체 생성에 큰 역할을 합니다. super 키워드 대신 uber는 여전히 권한 있는 방법으로 작동합니다.
클래스 확장
JavaScript의 동적 특성으로 인해 기존 클래스에 메서드를 추가하거나 교체할 수 있습니다. 언제든지 메소드를 호출할 수 있습니다. 언제든지 수업을 연장할 수 있습니다. 상속은 이런 식으로 작동하지 않습니다. 따라서 우리는 Java의 확장(확장이라고도 부르지만 동일한 것은 아님)과의 혼동을 피하기 위해 이 상황을 "클래스 확장"이라고 부릅니다.
객체 확장
정적 객체 지향 언어에서 한 객체를 다른 객체와 다르게 하려면 새 클래스를 만들어야 합니다. 하지만 JavaScript에서는 새 클래스를 만들지 않고도 개별 개체에 메서드를 추가할 수 있습니다. 가능한 한 적은 수의 클래스를 작성할 수 있고 클래스를 더 간단하게 작성할 수 있기 때문에 이는 엄청난 힘을 가지고 있습니다. 해시 테이블과 같은 JavaScript 개체를 생각해 보십시오. 언제든지 새로운 값을 추가할 수 있습니다. 값이 함수이면 메서드가 됩니다.
위의 예에서는 ZParenizor 클래스가 전혀 필요하지 않습니다. 인스턴스를 간단히 수정하면 됩니다.

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

 
myParenizor = new Parenizor(0); 🎜>myParenizor .toString = function () { 
if (this.getValue()) { 
return this.uber('toString') 
} 
return "-0-"; 🎜>} ; 
myString = myParenizor.toString(); 

 
상속을 사용하지 않고 myParenizor 인스턴스에 toString 메서드를 추가했습니다. 언어가 유형이 없기 때문에 개별 인스턴스를 발전시킬 수 있습니다. 

작은 디저트
위의 예제가 작동하도록 하기 위해 네 가지 "디저트" 메소드를 작성했습니다. 첫째, 메소드 메소드는 클래스에 인스턴스 메소드를 추가할 수 있습니다.

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

Function.prototype.method = 함수(이름 , func) {

this.prototype[name] = func; 
return this; 
} 

 
이것은 Function.prototype에 공개 메소드를 추가합니다. 클래스에 의해 확장될 수 있으며 모든 기능에서 사용할 수 있습니다. 이름과 함수를 매개변수로 사용합니다. 

이것을 반환합니다. 값을 반환하지 않는 메서드를 작성할 때 일반적으로 이를 반환하도록 합니다. 이는 연결된 진술을 형성할 수 있습니다.
다음은 상속 메소드로, 한 클래스가 다른 클래스에서 상속됨을 나타냅니다. 두 클래스를 모두 정의한 후에 정의해야 하지만 메서드 상속 전에 호출해야 합니다.

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

Function.method('inherits', function (부모) {

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

 
함수 .method(' swiss', function (parent) { 
for (var i = 1; i < 인수.length; i = 1) { 
var name = 인수[i]; 
this. 프로토타입[이름] = parent.prototype[이름]; 
return this; 
}) 

 

스위스 메소드는 각 매개변수를 반복합니다. 각 이름에 대해 부모 프로토타입의 멤버를 새 클래스의 프로토타입에 복사합니다.
요약
JavaScript는 클래스 언어처럼 사용할 수 있지만 매우 독특한 표현 수준을 가지고 있습니다. 우리는 클래스 상속, 스위스 상속, 기생 상속, 클래스 확장, 객체 확장을 살펴보았습니다. 이 일련의 코드 재사용 패턴은 모두 항상 작고 단순한 것으로 간주되었던 이 JavaScript 언어에서 나올 수 있습니다.
클래스 객체는 "하드"입니다. "하드" 개체에 멤버를 추가하는 유일한 방법은 새 클래스를 만드는 것입니다. JavaScript에서 객체는 "소프트"합니다. "소프트" 개체에 멤버를 추가하려면 간단히 값을 할당하면 됩니다.
JavaScript의 클래스는 매우 유연하기 때문에 더 복잡한 클래스 상속을 생각할 수도 있습니다. 그러나 깊은 상속은 적합하지 않습니다. 얕은 상속은 더 효율적이고 표현하기 쉽습니다.