JS의 결합 상속이란 무엇입니까? JS 조합 상속 소개

不言
풀어 주다: 2018-10-23 15:46:21
앞으로
2943명이 탐색했습니다.

이 기사에서는 JS의 결합 상속이 무엇인지 설명합니다. js 조합 상속의 도입은 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

조합 상속

가끔 의사 고전 상속이라고도 불리는 조합 상속은 프로토타입 연결 기술과 생성자를 차용하는 기술을 결합하여 두 가지를 활용하는 것을 의미합니다.

구현 아이디어: 프로토타입 체인을 사용하여 프로토타입 메소드 및 메소드의 상속을 실현하고 생성자를 빌려 인스턴스 속성의 상속을 실현합니다.

이러한 방식으로 함수 재사용은 프로토타입에 메서드를 정의하여 달성되며 각 인스턴스 개체가 고유한 속성을 갖도록 보장됩니다.

function SuperType(name){
    this.name = name;
    this.colors = ["red","green","blue"];
}

SuperType.prototype.sayName = function(){
    console.log(this.name);
}

function SubType(name, age) {
    
    //继承属性
    SuperType.call(this, name);

    this.age = age;
}

//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType();
SubType.prototype.sayAge = function(){
    console.log(this.age);
}

var instance1 = new SubType("Shaw", 18);
instance1.colors.push("black");
console.log(instance1.colors); //["red","green","blue","black"]
instance1.sayName(); // "Shaw"
instance1.sayAge(); // 18

var instance2 = new SubType("Roc", 19);
console.log(instance2.colors); // ["red", "green", "blue"]
instance2.sayName(); // "Roc"
instance2.sayAge(); // 19
로그인 후 복사

위 코드에서 SuperType 생성자는 이름과 색상이라는 두 가지 속성을 정의합니다.

sayName() 메소드는 SuperType의 프로토타입에 정의되어 있습니다.

SubType 생성자는 SuperType 생성자를 호출할 때 name 매개변수를 전달한 다음 자체 속성 age를 정의합니다.

그런 다음 SuperType 인스턴스 개체를 SubType 프로토타입에 할당한 다음 새 프로토타입에 sayAge() 메서드를 정의합니다.

이런 방식으로 두 개의 서로 다른 SubType 인스턴스 개체는 각각 색상 속성을 포함하여 고유한 속성을 가질 수 있습니다. 다시 같은 방법으로 사용할 수 있습니다.

컴포지션은 프로토타입 연결과 차용 생성자의 단점을 피하고 장점을 결합합니다. JavaScript에서 가장 일반적으로 사용되는 상속 패턴이 됩니다. 또한, 연산자 instanceof 및 isPrototypeOf() 메소드를 사용하여 구성 상속을 기반으로 생성된 객체를 식별할 수도 있습니다.

위 내용은 JS의 결합 상속이란 무엇입니까? JS 조합 상속 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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