>  기사  >  웹 프론트엔드  >  상속을 활용하는 자바스크립트 (2)_javascript 기술

상속을 활용하는 자바스크립트 (2)_javascript 기술

WBOY
WBOY원래의
2016-05-16 16:48:59977검색

물론 하위 클래스에서 상위 클래스의 생성자를 호출하는 이 방법이 더 이해하기 쉽습니다. 또한 이 방법의 가장 큰 장점 중 하나는 구조적 상속이 다중 상속을 달성할 수 있다는 것입니다.

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

함수 A()
{ }
함수 B()
{ }
함수 C()
{
this.father=A;
this.father();
delete this.father;
this .father=B;
this.father();
delete this.father;
}

하지만 이 방법에도 단점이 있습니다.
객체 지향에 익숙한 분들을 위해 다음 C# 코드를 살펴보겠습니다.

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

classProgram
{
staticvoid Main(string [] args)
{
B b=newB();
bool temp = (typeof(A)).IsInstanceOfType(b);
Console.WriteLine(temp);
}
}
classA
{
공개 A()
{

}
}
classB : A
{
공개 B( )
{

}
}

결과는? b는 물론 A의 인스턴스입니다:

그러나 구조 상속을 사용하는 위의 Javascript 코드에서 이 테스트를 수행해 보겠습니다.

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

함수 A()
{ }
함수 B()
{ }
함수 C()
{
this.father=A;
this.father();
delete this.father;
this .father=B;
this.father();
delete this.father;
}
var c=new C();
alert(c 인스턴스of A);

하지만 결과는 우리가 상상했던 것과 달랐습니다:

사실 설명하기 쉽습니다. 구조적 상속은 부모 클래스의 생성자 메서드를 호출하여 부모 클래스의 속성만 복사하고 다른 작업은 수행하지 않으므로 많은 자료에서 이 상속 메서드 상속을 호출하지 않습니다.

단점도 확인하면서 장점도 기억하세요. 다중 상속을 지원합니다.

C#의 상속을 살펴보면 이 상속과 가장 일반적인 두 가지 차이점이 있음을 알 수 있습니다. C#은 다중 상속을 지원하지 않는다는 것과 위에서 언급한 구조적 상속의 단점입니다. 그래서 프로토타입 상속이라는 새로운 상속 방법이 등장했습니다.

이름을 보면 프로토타입 상속이 프로토타입의 특성을 이용하여 상속을 달성한다는 것을 대략적으로 알 수 있습니다. 이는 Javascript에서 가장 널리 사용되는 상속 방법입니다. 프로토타입을 이해하지 못한다면 저의 다른 기사인 "프로토타입을 가지고 놀기 - 프로토타입"을 참조하십시오.
먼저 코드를 살펴보겠습니다. 여기서는 "자바스크립트 왕의 귀환"의 코드를 빌려왔습니다.

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

함수점(치수)
{
this.dimension=dimension;
this.Test=function(){
Alert("성공");
}
}
function Point2D(x,y)
{
this.x=x;
this.y=y;
}
Point2D.prototype=new Point(2);
var p=new Point2D(3,4) ;
p.Test();

테스트를 통과했습니다. Point2D가 상위 클래스의 메서드를 상속했음을 보여줍니다. 인스턴스를 다시 살펴보겠습니다.

경고(P 인스턴스);

성공! 좋습니다. 프로토타입 상속을 분석해 보겠습니다.

프로토타입 상속의 장점에 대해서는 자세히 설명하지 않겠습니다. 구조가 간단하고 이해하기 쉬우며 인스턴스화가 가능합니다. 하지만 그의 단점도 똑같이 분명합니다. 지난 기사에서 언급한 동물, 사람, 소녀의 예를 아직도 기억하시나요? 이를 달성하기 위해 프로토타입 상속을 사용합니다.

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

function Animal()
{
this.Run=function(){alert("I can run");}
}
function People(이름)
{
this.Say=function(){alert("내 이름은 " this.name);}
}
People.prototype=new Animal();
function Girl(이름, age)
{
this.age=age;
this.Introduce=function(){alert("제 이름은 " this.name "입니다. 저는 " this.age입니다);}; >}
Girl.prototype=new People(???);

빨간색 굵은 부분의 코드 줄에 주의하세요. People은 Girl의 프로토타입이므로 People을 초기화할 때 name 매개변수를 전달해야 하지만 각 Girl의 이름이 다르기 때문에 프로토타입 상속 Occasion 1 사용되지 않을 때: 프로토타입 상속 단계에서는 부모 클래스 객체를 초기화하는 데 사용할 매개변수를 결정할 수 없습니다. 경우 2: 매우 간단합니다. 각 클래스는 하나의 프로토타입만 가질 수 있습니다. 이는 프로토타입 상속을 다중 상속에 사용할 수 없음을 의미합니다. 이것은 좋은 일이기도 하고 나쁜 일이기도 합니다. 이유:

Java 및 C#과 같은 객체지향 언어는 원래 다중 상속을 지원하지 않으며 다중 상속은 객체지향과 일치하지 않는 것으로 간주됩니다.

여러 인터페이스를 구현할 수 없습니다!

자, 오늘은 여기까지입니다. 요약하면 프로토타입 상속은 구조적 상속의 일부 문제를 해결하고 몇 가지 새로운 문제를 야기합니다. 일반적으로 프로토타입 상속은 가장 널리 사용되는 상속 방법이자 Javascript 문법에서 상속을 구현하는 진정한 방법이기도 합니다!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.