javascript 의 계승 실례 상세 설명

javascript 의 계승 실례 상세 설명
읽 기 목록

원형 체인 계승

구조 함수 차용

그룹 상속

기생 조합 식 계승

후기

계승 은 인터페이스 계승 과 계승 실현 두 가지 방식 이 있다.인터페이스 상속 은 상속 방법 만 서명 하고 상속 을 실현 하면 실제 방법 을 계승 한다.
함수 가 서명 되 지 않 아 ECMAScript 에서 인터페이스 계승 이 불가능 합 니 다.ECMAScript 는 계승 실현 만 지원 하고 계승 실현 은 주로 원형 체인 에 의 해 이 루어 진다.
다음은 몇 가지 js 의 계승 을 소개 한다.
원형 체인 계승
원형 체인 계승 실현 의 본질은 원형 대상 을 다시 쓰 고 새로운 유형의 실례 를 대체 하 는 것 이다.코드 는 다음 과 같 습 니 다:

function SuperType() {
  this.property = true;
}

SuperType.prototype.getSuperValue = function() {
  return this.property;
};

function SubType() {
  this.subproperty = false;
}

//    SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function () {
  return this.subproperty;
};

var instance = new SubType();

console.log(instance.getSuperValue()); // true

인 스 턴 스 가 부모 급 getSuperVlue()방법 을 호출 하여 계승 을 실현 한 것 을 볼 수 있 습 니 다.
원형 체인 의 계승 은 다음 과 같은 문제 가 있다.

인용 형식 값 을 포함 하 는 원형 을 포함 할 때 원형 의 인용 유형 을 바 꿀 때 모두 바 꿉 니 다

하위 형식의 인 스 턴 스 를 만 들 때 모든 대상 의 인 스 턴 스 에 영향 을 주지 않 는 상황 에서 초 유형의 구조 함수 에 파 라 메 터 를 전달 할 수 없습니다.

예제 코드 는 다음 과 같다.

function SuperType1() {
  this.colors = ['red', 'blue', 'green'];
}
function SubType1() {

}
SubType1.prototype = new SuperType1();
var instance1 = new SubType1();
instance1.colors.push('black');
console.log(instance1.colors); // [ 'red', 'blue', 'green', 'black' ]

var instance2 = new SubType1();
console.log(instance2.colors); // [ 'red', 'blue', 'green', 'black' ]

인 스 턴 스 1 과 인 스 턴 스 2 의 colors 속성 이 공유 되 는 것 을 발견 할 수 있 습 니 다.이 는 문제 가 되 었 습 니 다.또한 new 의 새로운 방법 에서 값 을 전달 하면 부모 급 으로 전달 되 지 않 는 다 는 것 을 알 수 있 습 니 다.
차용 구조 함수
원 리 는 하위 형식 구조 함수 의 내부 에서 초 유형 구조 함 수 를 호출 하 는 것 이다.함 수 는 특정한 환경 에서 코드 를 실행 하 는 대상 에 불과 하기 때문에 부모 급 의 방법 과 속성 을 얻 을 수 있다.
코드 는 다음 과 같 습 니 다:

function SuperType(name) {
  this.name = name;
}

function SubType(name) {
  //    SuperType，        
  SuperType.call(this, name);

  //     
  this.age = 29;
}

var instance = new SubType('Bob');

console.log(instance.name); // Bob
console.log(instance.age); // 29

이 를 통 해 알 수 있 듯 이 구조 함수 계승 을 호출 하여 부모 유형 에 전 삼 하 는 문 제 를 해결 하 였 으 나 구조 함수 호출 에 도 그 자체 의 문제 가 있다.

방법 은 모두 구조 함수 에 있 고 함수 재 활용 이 없습니다.

초 유형의 원형 에서 정 의 된 방법 은 하위 유형 에 있어 보이 지 않 습 니 다.

첫 번 째 문 제 는 매우 뚜렷 하 다.두 번 째 문제 에 대한 해석 은 한 번 의 함수 만 실 행 했 을 뿐 새로운 대상 이 나 오지 않 았 기 때문에 부모 류 prototype 의 방법 은 하위 클래스 에 보이 지 않 는 다 는 것 이다.
조합 상속
원형 체인 계승 과 차용 구조 함수 계승 에 모두 결함 이 있 기 때문에 실제 적 으로 단독으로 사용 하지 않 는 다.
조합 상속 은 이들 의 장점 을 빌려 생 긴 상속 방법 이다.
그 원 리 는 원형 체인 을 사용 하여 원형 속성 과 방법 에 대한 계승 을 실현 하고 구조 함 수 를 빌려 실례 속성 에 대한 계승 을 실현 하 는 것 이다.
코드 는 다음 과 같 습 니 다:

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

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('Nicholas', 29);
instance1.colors.push('black');

console.log(instance1.colors); // [ 'red', 'blue', 'green', 'black' ]
instance1.sayName(); // Nicholas
instance1.sayAge(); // 29

var instance2 = new SubType('Greg', 27);

console.log(instance2.colors); // [ 'red', 'blue', 'green' ]
instance2.sayName(); // Greg
instance2.sayAge(); // 27

조합 계승 은 상기 두 가지 계승 방식 이 가 져 온 문 제 를 해결 할 수 있 지만 조합 계승 도 그 자체 의 작은 문제 가 있다.그것 은 바로 두 번 의 초 유형 구조 함 수 를 호출 하 는 것 이다.분석 을 통 해 한 번 은 서브 유형 원형 을 만 들 때 이 고 다른 한 번 은 서브 유형 구조 함수 내부 에 있다 는 것 을 알 수 있다.
기생 조합 식 계승
기생 조합 식 계승 의 원 리 는 구조 함 수 를 빌려 속성 을 계승 하 는 것 이다.원형 체인 의 혼합 형식 을 통 해 계승 하 는 방법 이다.기본 적 인 사 고 는 서브 유형의 원형 을 지정 하기 위해 초 유형의 구조 함 수 를 호출 하지 않 아 도 된다.우리 가 필요 로 하 는 것 은 초 유형 원형 의 사본 일 뿐이다.
코드 는 다음 과 같 습 니 다:

function object(o) {
  function F() {}
  F.prototype = o;
  return new F;
}

function inheritPrototype(subType, superType) {
  var prototype = object(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}

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

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

function SubType(name, age) {
  SuperType.call(this, name);

  this.age = age;
}

//      
inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function() {
  console.log(this.age);
};

var instance = new SubType('  ', 23);
instance.sayName();
instance.sayAge();

기생 조합 식 계승 은 구조 함 수 를 호출 할 때 만 초 유형 을 실행 하여 조합 계승 의 작은 문 제 를 해결 했다.
읽 어 주 셔 서 감사합니다. 여러분 에 게 도움 이 되 기 를 바 랍 니 다.본 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!