> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 상속을 구현하는 가장 좋은 방법을 권장합니다.

JavaScript에서 상속을 구현하는 가장 좋은 방법을 권장합니다.

PHPz
풀어 주다: 2018-09-30 13:29:34
원래의
1207명이 탐색했습니다.

이 장에서는 프로토타입 체인 방식과 결합된 실용적인 호출 방식을 사용하여 JavaScript 상속을 구현하는 가장 좋은 방법을 소개합니다. 매우 실용적이며 도움이 필요한 친구들이 참고할 수 있습니다.

자바스크립트 상속을 구현하는 가장 간단한 방법은 호출 방식(또는 적용 방식)과 프로토타입 체인 방식이지만 두 방식 모두 결함이 있어 이들을 혼합하는 방식이 상속을 구현하는 좋은 방식이다. 다음은 예입니다.

function Animal(age){
    this.age = age;
}
Animal.prototype.sayAge = function(){
    window.alert("My age is "+this.age+"!");
};
function Dog(age,name){
    Animal.call(this,age);
    this.name = name;
}
Dog.prototype = new Animal();
Dog.prototype.sayName = function(){
    window.alert("I am a "+this.name+"!");
};
var dog = new Dog(15,"dog");
dog.sayName();
dog.sayAge();
로그인 후 복사

Animal 클래스의 경우 필드 속성인 age와 함수 속성인 sayAge가 있습니다. sayAge 메소드는 프로토타입 방식으로 정의됩니다. Dog 클래스는 Animal을 상속해야 하며 해당 필드 속성에는 age 외에 name이 포함됩니다. Animal.call(this,age);을 통해 Dog는 Animal의 필드 속성 age를 상속하고 초기화할 수 있습니다. 호출 메소드의 첫 번째 매개변수는 상속된 클래스의 this 포인터이고, 두 번째 매개변수는 Animal 클래스 생성자의 매개변수입니다. 실제로 상속은 호출 메소드를 통해서만 달성할 수 있지만 유일한 요구 사항은 상위 클래스의 함수 속성을 생성자에서 정의해야 한다는 것입니다. 이는 여기서 함수 속성을 프로토타입 메소드를 사용하여 정의하는 데 적합하지 않습니다( 함수 속성을 정의하기 위해 프로토타입 메서드를 사용하는 것이 생성자 내에서 정의하는 것보다 더 직관적입니다. Animal의 프로토타입 모드에서 정의된 함수 속성을 상속하려면 필수 명령문은 "Dog.prototype = new Animal();"입니다. Dog 클래스의 sayName() 함수는 자체 함수 속성입니다.

상속을 구현하는 가장 고전적인 방법 외에도 현재 사용 가능한 무료 라이브러리가 몇 가지 있습니다. 하지만 온갖 종류의 도서관을 생각하면 부담스럽습니다. 시간이 나고 필요할 때 공부해 봅시다!

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