웹 프론트엔드 JS 튜토리얼 자바스크립트 디자인 패턴 학습 '클래스 상속'_javascript 스킬

자바스크립트 디자인 패턴 학습 '클래스 상속'_javascript 스킬

May 16, 2016 pm 04:10 PM
javascript 디자인 패턴

어떤 일을 하기 전에 먼저 그 일의 이점을 이해해야 합니다. 누구도 이유 없이 무언가를 하려는 사람은 없다고 생각합니다. 일반적으로 우리는 클래스를 디자인할 때 실제로 반복되는 코드를 줄이고자 하는데, 상속을 사용하면 이를 완벽하게 수행할 수 있으며, 상속 메커니즘을 사용하면 기존 클래스를 기반으로 다시 디자인할 수 있으며 이를 활용하면 디자인 수정이 더 쉬워집니다. 이미 가지고 있는 방법 중 하나입니다. 더 이상 고민하지 말고 몇 가지 예를 살펴보겠습니다.

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

함수 사람(이름){
This.name = 이름;
}
Person.prototype.getname = function(){
이 이름을 반환하세요.
}

기능 블로거(이름,블로그){
Person.call(this,name);
This.blog = 블로그;
}
var blogger = new Blogger("zhenn","http://www.jb51.net");
Alert(bloger.name=="zhenn"); /*참을 반환*/
알림(bloger.blog) /*알림 http://www.jb51.net*/
Alert(bloger.getname()=="zhenn"); /*"bloger.getname은 함수가 아닙니다."라는 메시지 표시*/

위의 예에서 볼 수 있듯이 Blogger는 내부적으로 호출을 통해 상위 클래스인 Person의 기본 속성과 메소드를 동적으로 호출합니다. (호출에 대한 설명은 http://www.jb51.net/article/을 참조하세요. 62086.htm), 이는 Blogger가 Person을 상속하여 그 하위 클래스가 되는 것으로 이해될 수 있지만 주의 깊은 학생들은 Person 프로토타입 객체의 메소드가 단순히 호출에 의존하는 것만으로는 상속될 수 없다는 것을 알게 될 것입니다. 기능'이 이유다. 하지만 걱정하지 마세요. 위 코드를 약간만 처리하면 이 문제를 해결할 수 있습니다!

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

함수 사람(이름){
This.name = 이름;
}
Person.prototype.getname = function(){
이 이름을 반환하세요.
}

기능 블로거(이름,블로그){
Person.call(this,name);
This.blog = 블로그;
}
/*다음 두 줄의 코드에 주의하세요*/
Blogger.prototype = 새로운 사람()
Blogger.prototype.constructor = 블로거;

var blogger = new Blogger("zhenn","http://www.jb51.net");
Alert(bloger.name=="zhenn"); /*참을 반환*/
알림(bloger.blog) /*알림 http://www.jb51.net*/
Alert(bloger.getname()=="zhenn") /*프롬프트 true*/

여기서 이 두 줄의 코드를 설명해야 합니다. 각 생성자에는 생성자의 프로토타입 객체를 가리키는 프로토타입 속성이 있다는 것을 알고 있습니다. 실제로 프로토타입 객체도 인스턴스 객체이지만 프로토타입에는 있습니다. object 정의된 속성과 메서드는 모든 인스턴스 개체에서 공유할 수 있습니다. 두 줄의 코드를 추가하는 목적은 하위 클래스의 프로토타입 개체가 부모 클래스의 인스턴스화된 개체를 가리키도록 설정하고 인스턴스화된 개체를 설정하는 것이라고 결론을 내릴 수 있습니다. 상위 클래스의 객체 상위 클래스의 모든 프로토타입 속성 메서드가 상속되므로 목표를 달성합니다. 하위 클래스의 프로토타입은 상위 클래스 인스턴스 객체의 모든 속성과 메서드를 상속합니다.

그러나 Blogger.prototype.constructor = Blogger; 코드 줄에도 주의를 기울여야 합니다. 왜냐하면 하위 클래스의 프로토타입을 상위 클래스의 인스턴스로 설정하면 생성자 속성이 상위 클래스를 가리키기 때문입니다. 하위 클래스 프로토타입의 생성자를 다시 설정해야 합니다. 이제 JavaScript 클래스 상속이 완벽하게 구현되었습니다.

하위 클래스 선언을 단순화하기 위해 하위 클래스를 확장하는 전체 프로세스를 확장이라는 함수로 작성할 수 있습니다. 이 함수는 주어진 클래스 구조를 기반으로 새 클래스를 생성하는 것입니다.

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

함수 확장(childClass,parentClass){
var F = 새 함수();
F.prototype = parentClass.prototype;
childClass.prototype = new F();
childClass.prototype.constructor = childClass;
}

이 확장 함수를 사용하면 쉽게 하위 클래스를 확장할 수 있습니다. 위에 추가한 두 줄의 코드를 확장(Bloger,Person)으로 변경할 수도 있고, 전체 상속도 가능합니다!

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

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Java 프레임워크의 디자인 패턴과 아키텍처 패턴의 차이점 Java 프레임워크의 디자인 패턴과 아키텍처 패턴의 차이점 Jun 02, 2024 pm 12:59 PM

Java 프레임워크의 디자인 패턴과 아키텍처 패턴의 차이점

Java 디자인 패턴에서 어댑터 패턴의 놀라운 사용 Java 디자인 패턴에서 어댑터 패턴의 놀라운 사용 May 09, 2024 pm 12:54 PM

Java 디자인 패턴에서 어댑터 패턴의 놀라운 사용

Java 디자인 패턴의 데코레이터 패턴 분석 Java 디자인 패턴의 데코레이터 패턴 분석 May 09, 2024 pm 03:12 PM

Java 디자인 패턴의 데코레이터 패턴 분석

PHP 디자인 패턴 실제 사례 분석 PHP 디자인 패턴 실제 사례 분석 May 08, 2024 am 08:09 AM

PHP 디자인 패턴 실제 사례 분석

Java 프레임워크에서 디자인 패턴을 사용할 때의 장점과 단점은 무엇입니까? Java 프레임워크에서 디자인 패턴을 사용할 때의 장점과 단점은 무엇입니까? Jun 01, 2024 pm 02:13 PM

Java 프레임워크에서 디자인 패턴을 사용할 때의 장점과 단점은 무엇입니까?

디자인 패턴이 코드 유지 관리 문제를 처리하는 방법 디자인 패턴이 코드 유지 관리 문제를 처리하는 방법 May 09, 2024 pm 12:45 PM

디자인 패턴이 코드 유지 관리 문제를 처리하는 방법

Guice 프레임워크에 디자인 패턴 적용 Guice 프레임워크에 디자인 패턴 적용 Jun 02, 2024 pm 10:49 PM

Guice 프레임워크에 디자인 패턴 적용

PHP 디자인 패턴: 실제 테스트 중심 개발 PHP 디자인 패턴: 실제 테스트 중심 개발 Jun 03, 2024 pm 02:14 PM

PHP 디자인 패턴: 실제 테스트 중심 개발

See all articles