> 웹 프론트엔드 > JS 튜토리얼 > 상속을 활용하는 자바스크립트 (1)_javascript 기술

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

WBOY
풀어 주다: 2016-05-16 16:49:02
원래의
1230명이 탐색했습니다.

자바스크립트가 객체지향 언어인지, 객체를 지원하는 언어인지에 대해서는 사람마다 각자의 의견이 있다고 생각합니다. Javascript의 충성스러운 팬들은 Javascript가 객체 지향 언어라고 말해야 합니다. 예를 들어, "Javascript의 왕의 귀환"이라는 책에서는 Javascript를 프로토타입 기반의 객체 지향으로 설명합니다. 제 개인적인 의견을 말씀드리겠습니다. 객체 지향, 상속, 다형성 및 캡슐화의 세 가지 특성 Javascript는 Java, C# 및 기타 객체 지향 언어만큼 구현 속도가 빠르지는 않지만 결국 여전히 특정 지원을 제공합니다. 따라서 Javascript는 객체지향 언어라고 말하는 것이 타당합니다. 그러나 상속의 관점에서 보면 일련의 상속 방법이 있지만 각각의 상속 방법은 진정한 객체지향 언어의 힘을 실현할 수 없습니다. 객체지향적이라고 합니다. 요약하자면, 저는 Javascript를 단순화된 객체 지향 또는 "의사" 객체 지향이라고 부르는 것을 선호합니다(이 의사 단어는 경멸적인 의미가 없습니다).

오늘은 객체지향의 첫 번째 특징인 상속에 대해 이야기해보겠습니다.
상속이란 무엇입니까? 나는 이것에 대해 말도 안되는 이야기를하고 싶지 않습니다. 이것은 가장 단순하고 전형적인 상속 체인입니다.
C#과 같은 객체지향 언어에서는 쉽습니다.

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

class Animal
{ }
클래스 사람:동물
{ }
클래스 소녀:사람
{ }

그러면 Javascript에는 구현을 제공하는 클래스나 상속이 없습니다. 어떻게 해야 할까요?
객체 위장(구성 상속 방식)
객체 위장이란? 이해하기 쉽도록 구조적 상속이라고 부를 수도 있습니다. 이름에서 알 수 있듯이 생성자를 사용하여 상속을 수행합니다. 실제로는 상위 클래스의 생성자를 일반적인 메소드로 간주하여 하위 클래스의 생성자에서 실행된다는 의미입니다. 이 경우 객체를 생성할 때 하위 클래스의 객체도 당연히 해당 클래스의 메소드를 생성할 수 있습니다. 학부모 수업!

그래도 위의 예를 사용하면 코드는 다음과 같습니다.

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

function Animal()
{
        .Run=function(){alert("I can run");};
}
function People(name)
{
//여기서 상위 클래스의 생성자가 전달됩니다. in 에서 상위 클래스의 생성자 메서드를 실행합니다. 이때 // 상위 클래스의 메서드를 사용할 수 있습니다.
this.father=Animal;
this.father();
//삭제해야 합니다. 그렇지 않으면 하위 클래스가 상위 클래스에 동일한 이름의 메서드를 추가하면 상위 클래스로 수정됩니다. 수업.
this.Father 삭제;
this.name=name;
this.Say=function(){alert("내 이름은 " this.name);}
}
함수 소녀 (이름,나이)
{
this.father=People;
this.father(이름)
delete this.father; Introduce=function(){alert("제 이름은 " this.name "입니다. 저는 " this.age입니다);};
이 경우 상속 체인이 구현됩니다.


코드 복사

코드는 다음과 같습니다.var a=new Animal() a .Run(); var p=new People("Windking"); p.Run()
p.Say()
var g=new Girl(" Xuan", 22);
g.Run();
g.Say();
g.Introduce();

결과는 다음과 같습니다.

ㄴ.

c.

디.

e.

f.

테스트 성공!

이 코드의 핵심을 요약하자면, 상위 클래스를 지정하고 상위 클래스 객체를 선언한 후 임시 변수를 삭제하는 것이 번거로우신가요? 적어도 내 생각에는 삭제하는 것을 잊어버리더라도 상위 클래스가 수정될 위험을 감수해야 합니다. 이를 위해 호출 및 적용을 사용하여 이를 개선합니다!
다음 코드를 살펴보겠습니다. 여전히 위의 예입니다(모든 사람이 쉽게 이해할 수 있도록 요구 사항이 변경되었습니다. 동물에는 이름이 있습니다).

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

function Animal(이름)
{
this.Run=function(){alert("I can Run");};
}
function People(name)
{
//상속을 구현하려면 호출 메서드를 사용하세요.
this.father=Animal;
this.father.call(this,name);
this.name=name
this.SayName=function(){alert("내 이름은 " this.name;) ;};
}
function Girl(이름,나이)
{
//상속 구현을 위해 Apply 메소드 사용
this.father=People; this.father.apply( this,new Array(name));
this.age=age
this.Introduce=function(){alert("내 이름은 " this.name "입니다. this.age);} ;
}

동일한 테스트 코드를 사용하여 테스트를 성공적으로 수행한 것으로 나타났습니다.

초심자라면 다음 두 코드가 무엇이고 적용이 무엇인지 조금 헷갈릴 수 있습니다. 글쎄요, 상속을 다루는 주제에 대해 보충 시리즈를 추가했습니다. 이 내용을 이해하지 못하신다면 제 기사인 "메소드 사용: 호출 및 적용"을 읽어보세요.

객체 위장은 상속을 달성하는 방법일 뿐입니다. 다음 글에서는 계속해서 다른 상속 방법과 여러 상속 방법의 장단점에 대해 글을 쓰겠습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿