자바스크립트 상속을 받아야 하는 이유_기본지식

퀴즈1
Javascript에 정말 클래스가 필요한가요?
먼저 클래스가 있는 다른 객체지향 언어(예: Java)의 몇 가지 기능을 살펴보겠습니다.

슈퍼클래스와 서브클래스
슈퍼클래스와 서브클래스는 부자 문제를 해결하기 위한 것이 아니라 클래스의 포함관계를 해결하기 위해 그렇습니다. Sub를 사용하여 "서브클래스"를 나타냅니다. 및 Sup이 "부모 클래스"를 나타내려면 다음과 같습니다.
　Sub Sup
예를 들어 일반적으로 하위 클래스를 부모 클래스로 사용할 수 있지만 사람을 인식할 때는 아들을 클래스로 간주할 수 없습니다. 아버지.
즉, 상위 클래스와 하위 클래스는 클래스 간의 동일한 메소드나 속성 문제를 해결하기 위해 설계되지 않았습니다.

예를 들어
어떤 사람들은 이것을 좋아합니다:
화면에 움직이는 동물을 만들려면 몇 가지 종류의 동물이 필요하지만 움직이는 동물 중 일부는 공중에 날고 있고 일부는 길을 걷고 있습니다.
두 개의 상위 클래스를 만듭니다. 하나는 Fly이고 다른 하나는 Walk입니다.

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

클래스 플라이{
플라이(){}
}
클래스 워크{
워크(){}
}

그럼 사자(길을 걷는 다른 동물도 만들 수 있음)는 걷기 카테고리에 속하고, 독수리(하늘을 나는 다른 동물도 만들 수 있음)는 파리 카테고리에 속합니다.

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

클래스 라이온 연장 걷기{
}
클래스 Eagle 확장 Fly{
}

마지막으로 Lion 및 Eagle 클래스의 일부 인스턴스를 만들고 해당 메서드를 호출하면 화면에서 사자와 독수리가 움직이는 모습이 나타납니다.
그러나 이것은 좋은 디자인이 아닐 수도 있습니다. 예를 들어, 내일 상사가 갑자기 머리를 부딪쳐 페가수스라는 동물을 갖고 싶다고 합니다. 그들은 하늘을 날 수도 있고, 길을 걸을 수도 있고, 때로는 날아갈 수도 있습니다. .
이 경우 이 솔루션은 전혀 쓸모가 없습니다.

이 디자인은 왜 실패했나요?
상속은 조건부이며 하위 클래스는 엄격하게 상위 클래스로 변환(부모 클래스가 됨)이 가능해야 합니다.
위 예시에서
Lion은 걷는 동물(Walk)에 해당하고, Eagle은 날아다니는 동물(Fly)에 해당한다고 가정합니다.
하위 클래스는 엄격하게 상향 캐스팅할 수 있기 때문에 성공적인 것처럼 보이지만 숨겨진 위험이 있습니다.
일종의 페가수스가 개입했을 때 우리는 사자가 실제로는 "걷는 동물"일 뿐이고 독수리는 실제로 "나는 동물"일 뿐이라는 사실을 발견했습니다. 이는 동물이 평생 동안 날거나 걸을 수만 있다는 의미는 아닙니다. 날기도 하고 걸을 수도 있는 는 자신의 집을 찾지 못합니다.
이 예는 하위 클래스와 부모 클래스가 클래스 간에 동일한 메서드를 사용하는 문제를 해결하도록 설계되지 않았음을 잘 증명합니다.
일부 동물은 걸을 수 있고 Walk 메서드가 필요하지만 이를 수행해서는 안 됩니다. 하위 클래스. 클래스 및 상위 클래스 구현.

조합
이 문제는 다음과 같이 해결할 수 있습니다.

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

클래스 라이온{
walker = new Walk()
walk(){
return walker.walk(); }
클래스 이글{
flyer = new Fly();
fly(){
flyer.fly()
}
}
페가수스 클래스{
walker = new Walk();
flyer = new Fly();
walk(){
walker.walk()
}
fly(){
return Flyer.fly()
}
}


컴포지션은 단순히 새 클래스 내에 원래 클래스의 개체를 만드는 것입니다. 따라서 조합은 클래스 간에 동일한 메서드를 갖는 문제를 해결하는 것입니다. 이 예에서는
Walk는 "걷는 동물이 가져야 하는 방법 집합"으로 간주되고 마찬가지로 Fly는 "걷는 동물이 가져야 하는 방법 집합"으로 간주되므로 Pegasus의 경우 결합만 하면 됩니다. 걷고 날기.

상속의 목적
상속이 코드를 재사용하는 유일한 방법은 아니지만 상속에는 장점이 있습니다.
하위 클래스를 상위 클래스로 변환할 수 있습니다.
이런 방식으로 모든 하위 클래스 차이점을 무시하고 동일한 클래스로 작동할 수 있습니다. 예를 들면 다음과 같습니다.
fn(A), fn(B) 메서드가 있는데 이 두 메서드는 실제로 유사하므로 재사용하려고 합니다.
그런 다음 A는 C의 하위 클래스이고 B는 C의 하위 클래스인 상위 클래스 C를 설정할 수 있습니다. 그런 다음 fn(C)를 A와 B에서 재사용할 수 있습니다.

Javascript로 돌아가기
하지만 Javascript로 돌아가서 우리는 위의 예가 사실이 아니라는 것을 발견했습니다.
자바스크립트 자체는 약한 타입의 언어이기 때문에 이전에 동작했던 객체의 타입에 주의를 기울이지 않습니다(컴파일할 필요가 없기 때문입니다). 성공만 하고 그렇지 않으면 오류가 발생합니다.
이때 상속은 불필요해 보입니다. 그렇다면 수업도 필요하지 않습니다.
저는 8년 동안 JavaScript를 작성해 왔지만 우버 기능을 사용해야 할 필요성을 느낀 적이 없습니다. 슈퍼 아이디어는 클래식 패턴에서는 상당히 중요하지만 프로토타입 패턴과 기능적 패턴에서는 불필요해 보입니다. 이제 저는 JavaScript에서 클래식 모델을 지원하려는 초기 시도가 실수라고 생각합니다.
——Douglas Crockford
저는 8년 동안 Javascript 코드를 작성해 왔지만 슈퍼클래스 함수를 사용할 필요성을 전혀 느끼지 못했습니다. 슈퍼클래스의 개념은 고전적인 디자인 패턴에서는 매우 중요하지만, 프로토타입과 기능 기반의 패턴에서는 필요하지 않습니다. 이제 저는 Javascript에서 클래식 모드를 지원하려는 초기 시도가 잘못된 결정이었다고 생각합니다.

안전한 환경
물론 수동으로 유형을 결정하고 매개변수 유형을 제어하여 보다 안전한 환경을 제공할 수 있습니다.
예를 들어 약한 유형의 스크립트 언어이기도 한 PHP는 강력한 유형의 객체 지향 언어를 시뮬레이션하고 안전한 환경을 설정하기 위해 이 작업을 수행해야 합니다.

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

class ShopProductWriter{
public function write( $shopProduct ){
if( ! ( $shopProduct 인스턴스of CdProduct ) && ! ( $shopProduct 인스턴스of BookProduct ) ){
die( "잘못된 유형을 입력하세요" )
}
//유형이 올바르면 일부 코드를 실행하세요
}
}

— —PHP Objects, Patterns, and Practtice Third Edition . Matt Zandstra
그러나 이는 매우 보기 흉한 솔루션입니다.

클래식 상속 구문 설탕 구현
그러나 클래식 상속은 여전히 ​​많은 사람들이 선호하는 방법입니다. 따라서 YUI, Prototype, Dojo 및 MooTools는 모두 자체 구현 솔루션을 제공합니다.
보다 일반적인 솔루션 중 구문은 대략 다음과 같습니다.

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

var Person = Class.extend({
init: function(isDancing){
this.dancing = isDancing;
}
})
var Dancer = Person.extend({
init: function(){
this._super( true );
}
})
var n = new Dancer(); n.dancing ); //true

가장 중요한 구현은 this._super의 구현입니다. 실제로 확장 함수는 전달된 객체를 다시 조립하여 프로토타입 객체로 변환합니다. 프로토타입의 새 생성자.
구체적인 구현은 참조 1을 참조하세요.


ECMAScript 6의 고전적인 상속 구문 설탕 클래스 라이브러리가 자체 구현을 구현하여 많은 수의 고전적인 상속 구문이 생성되는 경우 ECMA 조직은 만족하지 않는 것 같습니다. ECMAScript 6 Classic 상속 구문에 보다 직관적인 구문을 추가하려고 합니다.

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

class Animal {
생성자(이름) {
this.name = 이름
}
sayName() {
console.log(this.name);
}
}
class Dog 확장 Animal {
constructor(name) {
super(name)
}
bark() {
console.log( "으악!");
}
}


요약
사실 자바스크립트에서는 클래식 상속이 필요하지 않습니다.
그러나 많은 사람들이 고전적인 상속 모델을 좋아하기 때문에 ECMAScript 6의 새 버전에서는 관련 구문 설탕이 제공됩니다.
그러나 중국에서 이 구문 설탕을 프런트 엔드에 널리 사용하는 것은 먼 이야기여야 합니다...

Quiz2
Javascript 전용 상속은 어떻습니까?

프로토타입 상속
프로토타입 상속은 클래식 상속의 컬렉션 포함 관계를 해결하지 않습니다. 실제로 프로토타입 상속은 종속 관계를 해결합니다.
　Sub. 프로토타입 ∈ Sup
자식 생성자(하위 유형) 프로토타입은 부모 생성자(부모 유형)가 만든 인스턴스 객체입니다. 프로토타입은 실제로 하위 유형 인스턴스 간에 공유되어야 하는 것입니다.

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

function Being(){
this.living = true
}
Being.prototype.walk = function(){
alert("나는 걷고 있어요")
};
function Dancer(){
this.dancing = true;
}
Dancer.prototype = new Being()
Dancer.prototype.dance = function()
alert("나는 춤추고 있어요");
var one = new Dancer()
one.dance();

차용, 기생 및 기타 기술을 사용하면 다양한 상속 효과가 발생할 수 있지만 이러한 기술은 프로토타입 상속의 속성 및 메서드에 대한 일부 공개 및 비공개 문제를 해결하기 위한 것일 뿐입니다. 공간 문제로 인해 더 이상 논의하지 않겠습니다. 관심이 있는 경우 "Javascript Advanced 프로그래밍"의 관련 내용을 참조할 수 있습니다.

생각하는 질문

1. 글 시작 부분에 나오는 페가수스에 대한 질문을 자바스크립트로 작성했다면 어떻게 디자인해야 할까요? 예를 들어 다음과 같은 두 가지 유형이 있습니다.

코드 복사 코드는 다음과 같습니다. function Walk() {

this.walk = function(){

//walk
}
function Fly(){
this.fly = function() {
/ /플라이
}