원생 자바 script 계승 방식 및 장단 점 상세 설명

머리말
최근 자 바스 크 립 트 의 기초 지식 을 복습 하 며 새로운 여정 을 시작 하기 위해 준비 하고 있 습 니 다.그래서 자기가 배 운 내용 을 기록 하기 시 작 했 어 요.
그럼 오늘 의 주 제 는 js 의 원생 상속 방식 입 니 다.
잔말 말고 코드 올 려!
우선 우리 아버지 코드 입 니 다.
여기에서 우 리 는 Person 클래스 를 부모 클래스 로 만 듭 니 다.구조 함 수 는 2 개의 인자 name 과 age 가 필요 합 니 다.
그리고 우 리 는 그것 의 원형 에 sayHi 의 방법 을 추가 했다.

//  
function Person (name, age) {
    this.name = name || 'no name';
    this.age = age || 0;
}

Person.prototype.sayHi = function () {
    console.log('Hi, I\'m ' + this.name + ' and i\'m ' + this.age + ' years old!');
}

var p = new Person('A',20);
p.sayHi();//Hi, I'm A and i'm 20 years old!

원형 계승

//    
function Teacher(){
}

Teacher.prototype=new Person('B',22);
Teacher.prototype.constructor=Teacher;

var t = new Teacher();
t.sayHi();//Hi, I'm B and i'm 22 years old!
console.log(t instanceof Person);//true
console.log(t instanceof Teacher);//true

장점.
위의 코드 를 보면 Teacher 의 인 스 턴 스 는 Person 의 속성 과 방법 을 가지 고 있 습 니 다.또한 실례 대상 은 Person 의 실례 이자 Teacher 의 실례 이다.그리고 이런 상속 방식 은 특히 간단 하 다.
결점.
Teacher 류 의 name 과 age 가 고정 되 어 있 고 모두 name=B 와 age=22 라 는 것 을 쉽게 알 수 있 습 니 다.다시 말 하면 우리 가 원 하 는 대로 아버지 류 에 전달 하 는 구조 함수 전 참 을 실현 할 수 없다 는 것 입 니 다.그리고 하 나 는 우리 가 Teacher 에 게 여러 개의 원형 을 지정 할 수 없다.즉,더 이상 계승 할 수 없다.그리고 다음 코드 를 보 겠 습 니 다.

var t1 = new Teacher();
var t2 = new Teacher();
Teacher.prototype.name = "C";
t1.sayHi();//Hi, I'm C and i'm 22 years old!
t2.sayHi();//Hi, I'm C and i'm 22 years old!

위의 이 코드 에서 우 리 는 원형 중의 속성 이나 방법 이 바 뀌 었 을 때 모든 하위 클래스 인 스 턴 스 의 속성 과 방법 도 이에 따라 바 뀌 는 것 을 볼 수 있다.즉,원형 계승 의 또 다른 단점 이다.모든 하위 클래스 가 같은 원형 대상 을 공유 하 는 것 이다.
여기 서 원형 에 대해 말 했 습 니 다.저도 예전 에 원형 에 관 한 수필 을 쓴 적 이 있 지만 모호 할 수도 있 습 니 다.현재 의 이해 와 그 당시 가 다 르 기 때문에 저 는 뒤에서 원형 에 관 한 수필 을 다시 쓸 것 입 니 다.연결
구조 함수 계승

//      
function Teacher (name, age) {
    Person.call(this, name, age);
}

var t1 = new Teacher('B', 22);
var t2 = new Teacher('C', 30);
console.log(t1.name);//B
console.log(t2.name);//C
console.log(t1 instanceof Person);//false
console.log(t1 instanceof Teacher);//true
t1.sayHi();//TypeError: t1.sayHi is not a function
t2.sayHi();//TypeError: t1.sayHi is not a function

장점.
원형 계승 에 비해 구조 함수 계승 은 모든 하위 클래스 인 스 턴 스 가 통 일 된 원형 을 공유 하 는 문 제 를 해결 하고 부모 류 의 구조 함수 에 전 참 될 수 있 습 니 다.또한 우 리 는 하위 클래스 의 구조 함수 에서 여러 부모 류 의 구조 함 수 를 호출 하여 이른바 다 중 계승 을 실현 할 수 있 습 니 다.apply 등 방법 으로 부모 류 의 구조 함 수 를 호출 하여 부모 류 의 속성 과 방법 을 가지 게 합 니 다.그러나 js 중의 한 함수 대상 은 하나의 prototype 만 존재 하기 때문에 우 리 는 원형 체인 의 형식 을 통 해 다 중 계승 을 나 타 낼 수 없습니다)
결점.
위의 코드 에서 우 리 는 만 든 인 스 턴 스 가 하위 클래스 의 인 스 턴 스 일 뿐 부모 클래스 의 인 스 턴 스 가 아니 라 계승 을 직관 적 으로 나타 내지 못 한 다 는 것 을 알 수 있다.이런 계승 방식 도 부모 류 의 원형 상의 속성 과 방법 을 계승 할 수 없다.
조합 식 계승

//     
function Teacher (name, age) {
    Person.call(this, name, age);
}

Teacher.prototype = new Person();
Teacher.prototype.constructor = Teacher;


var t1 = new Teacher('B', 22);
var t2 = new Teacher('C', 30);
Teacher.prototype.name = "D";
console.log(t1.name);//B
console.log(t2.name);//C
t1.sayHi();//Hi, I'm B and i'm 22 years old!
t2.sayHi();//Hi, I'm C and i'm 30 years old!
console.log(t1 instanceof Person);//true
console.log(t1 instanceof Teacher);//true

조합 식 계승 은 원형 계승 과 구조 함수 계승 의 장점 을 결합 시 켜 두 가지 방식 에 존재 하 는 단점 을 해결 했다.그러나 우 리 는 하위 클래스 인 스 턴 스 를 만 들 때마다 부모 클래스 의 인 스 턴 스 를 만 드 는 것 을 발견 할 수 있 습 니 다.비록 부모 클래스 인 스 턴 스 는 같은 인 스 턴 스(메모리 주소 가 다 름)가 아니 지만 그들 은 속성 과 방법 이 완전히 일치 하기 때문에 우 리 는 다음 과 같은(기생 식 조합 계승)방식 으로 불필요 한 인 스 턴 스 구 조 를 보완 합 니 다.
기생 식 조합 계승

//       
function Teacher (name, age) {
    Person.call(this, name, age);
}

Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;


var t1 = new Teacher('B', 22);
var t2 = new Teacher('C', 30);
Teacher.prototype.name = "D";
console.log(t1.name);//B
console.log(t2.name);//C
t1.sayHi();//Hi, I'm B and i'm 22 years old!  
t2.sayHi();//Hi, I'm C and i'm 30 years old!
console.log(t1 instanceof Person);//true
console.log(t1 instanceof Teacher);//true 

위의 방식 은 우리 가 하위 클래스 인 스 턴 스 를 만 들 지 않 고 부모 클래스 인 스 턴 스 를 만 드 는 문 제 를 해결 했다.이것 도 가장 자주 사용 하 는 js 의 계승 방식 이다.만약 에 우리 가 Babel 을 통 해 ES6 중의 class 의 계승 을 ES5 코드 로 바 꾸 면 우 리 는 기생 식 조합 으로 계승 하 는 것 을 발견 할 수 있다.
총결산
네 이 티 브 자 바스 크 립 트 의 계승 방식 과 그 장단 점 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.네 이 티 브 자 바스 크 립 트 의 계승 방식 에 관 한 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!