[js 고수 의 길]원형 체인 부터 도해 계승 부터 조합 계승 까지 의 상세 한 설명

javascript 프로 토 타 입 체인 의 계층 적 검색 규칙 과 프로 토 타 입 대상(prototype)의 공유 특성 을 계승 하 는 것 은 매우 간단 한 일이 다.
1.부모 클래스 의 인 스 턴 스 대상 을 하위 클래스 의 원형 대상(prototype)에 부여 하면 계승 을 실현 할 수 있 습 니 다.

function Person(){
 this.userName = 'ghostwu';
 }
 Person.prototype.showUserName = function(){
 return this.userName;
 }
 function Teacher (){}
 Teacher.prototype = new Person();

 var oT = new Teacher(); 
 console.log( oT.userName ); //ghostwu
 console.log( oT.showUserName() ); //ghostwu

부모 클래스(Person)의 인 스 턴 스 를 하위 클래스 Teacher 의 원형 대상 에 부여 하면 계승 을 실현 할 수 있 고,하위 클래스 의 인 스 턴 스 는 부모 클래스 의 속성 과 방법 에 접근 할 수 있 습 니 다.

만약 당신 이 이 그림 을 그 릴 줄 모른다 면,당신 은 나의 이 문장 을 보 러 가 야 합 니 다.
[js 고수 의 길]자바 script 의 원형(prototype)대상,원형 체인 을 한 걸음 씩 도해 합 니 다.
11 번 째 줄 에서 oT.userName 을 실행 합 니 다.먼저 oT 대상 에서 찾 아 보 세 요.oT 대상 에 속성 이 없 음 이 분명 하기 때문에 oT 의 암시 적 원형proto__Teacher.prototype 을 찾 았 습 니 다.
userName 이라는 속성 이 없 는 것 을 발 견 했 습 니 다.Teacher.prototype.proto__위로 찾기 new Person()이 인 스 턴 스 위 에 userName 이 있 습 니 다.값 은 ghostwu 입 니 다.
그래서 찾기 를 중단 하고 고 스 트 우 를 출력 합 니 다.
12 번 째 줄 에서 oT.show UserName 을 실행 하 는 과정 은 같 지만 new Person()이라는 인 스 턴 스 에서 show UserName 이라는 방법 을 찾 지 못 했 습 니 다.new Person()을 따라 계속 진행 합 니 다.
스텔스 원형proto__가리 키 는 방향(Person.prototype)을 찾 습 니 다.Person.prototype 에서 showUserName 이라는 방법 을 찾 았 습 니 다.찾 는 것 을 멈 추고 ghostwu 를 출력 합 니 다.
2.부모 클래스 의 원형 대상(prototype)을 하위 클래스 의 원형 대상(prototype)에 부여 하면 부모 클래스 의 방법 을 계승 할 수 있 으 나 부모 클래스 의 속성 을 계승 할 수 없습니다.

function Person(){
 this.userName = 'ghostwu';
 }
 Person.prototype.showUserName = function(){
 return 'Person::showUserName  ';
 }
 function Teacher (){}
 Teacher.prototype = Person.prototype;

 var oT = new Teacher(); 
 console.log( oT.showUserName() ); //ghostwu
 console.log( oT.userName ); //undefined,         userName

Teacher.prototype 의 암시 적 원형(proto__)Person.prototype 만 가리 키 기 때문에 Person 인 스 턴 스 의 속성 을 가 져 올 수 없습니다.
3.계승 관계 가 발생 한 후 사례 와 구조 함수(류)의 관계 판단
아니면 instanceof 와 isPrototype Of 를 통 해 판단 하 시 겠 습 니까?

function Person(){
 this.userName = 'ghostwu';
 }
 Person.prototype.showUserName = function(){
 return this.userName;
 }
 function Teacher (){}
 Teacher.prototype = new Person();
 
 var oT = new Teacher();
 console.log( oT instanceof Teacher ); //true
 console.log( oT instanceof Person ); //true
 console.log( oT instanceof Object ); //true
 console.log( Teacher.prototype.isPrototypeOf( oT ) ); //true
 console.log( Person.prototype.isPrototypeOf( oT ) ); //true
 console.log( Object.prototype.isPrototypeOf( oT ) ); //true

4.부모 클래스 에 존재 하 는 방법 과 속성,하위 클래스 는 덮어 쓸 수 있 고,하위 클래스 에 없 는 방법 과 속성 은 확장 할 수 있 습 니 다.

function Person() {}
 Person.prototype.showUserName = function () {
 console.log('Person::showUserName');
 }
 function Teacher() { }
 Teacher.prototype = new Person();
 Teacher.prototype.showUserName = function(){
 console.log('Teacher::showUserName');
 }
 Teacher.prototype.showAge = function(){
 console.log( 22 );
 }
 var oT = new Teacher();
 oT.showUserName(); //Teacher::showUserName
 oT.showAge(); //22

5.원형 대상 을 다시 쓴 후에 사실은 원형 대상 의proto__의 지향 이 바 뀌 었 다
원형 대상 prototype 의proto__의 지향 이 바 뀌 면 원래 의 상속 관 계 를 덮어 씁 니 다(차단)

function Person() {}
 Person.prototype.showUserName = function () {
 console.log('Person::showUserName');
 }
 function Teacher() {}
 Teacher.prototype = new Person();
 Teacher.prototype = {
 showAge : function(){
 console.log( 22 );
 }
 }
 var oT = new Teacher();
 oT.showAge(); //22
 oT.showUserName();

상례,일곱 번 째 줄,Teacher.prototype 은 Teacher 의 원형 대상(prototype),원래 여섯 번 째 줄 의 원형 대상 의 암시 적 원형(proto__)가리 키 면 소 용이 없어 요.
그래서 14 번 째 줄 에서 oT.show UserName()호출 오류 가 발생 합 니 다.Teacher 의 프로 토 타 입 대상(prototype)의 암시 적 프로 토 타 입(proto__)부모 클래스(Person)의 인 스 턴 스 를 가리 키 지 않 고 계승 관계 가 파괴 되 었 습 니 다.
6.계승 과정 에서 인 스 턴 스 의 속성 상 참조 형식의 데 이 터 를 조심 하 십시오.

function Person(){
 this.skills = [ 'php', 'javascript' ];
 }
 function Teacher (){}
 Teacher.prototype = new Person();

 var oT1 = new Teacher();
 var oT2 = new Teacher();
 oT1.skills.push( 'linux' );
 console.log( oT2.skills ); //php, java, linux

oT1 의 skills 는 Liux 데 이 터 를 추 가 했 습 니 다.다른 인 스 턴 스 는 skills 데 이 터 를 공 유 했 기 때문에 skills 는 참조 형식 입 니 다.
7.구조 함수 차용
인용 유형 이 서로 다른 인 스 턴 스 에 영향 을 미 치 는 것 을 없 애기 위해 구조 함 수 를 빌려 인용 유형의 데 이 터 를 모든 대상 에 복사 하면 서로 영향 을 주지 않 습 니 다.

function Person( uName ){
 this.skills = [ 'php', 'javascript' ];
 this.userName = uName;
 }
 Person.prototype.showUserName = function(){
 return this.userName;
 }
 function Teacher ( uName ){
 Person.call( this, uName );
 }
 var oT1 = new Teacher();
 oT1.skills.push( 'linux' );
 var oT2 = new Teacher();
 console.log( oT2.skills ); //php,javascript
 console.log( oT2.showUserName() );

oT1.skills 에 Linux 를 추 가 했 지만 oT2.skills 의 데이터 에 영향 을 주지 않 습 니 다.하위 구조 함수 에서 call 방식 으로 부모 류 의 구조 함 수 를 빌려 부모 류 의 속성 을 복사 할 수 있 습 니 다.또한
8 번 째 줄 과 같은 매개 변 수 를 전달 하지만 15 번 째 줄 은 방법 호출 이 잘못 되 었 습 니 다.구조 에서 속성 만 복사 하고 부모 류 원형 대상 에 복사 하지 않 는 방법 이기 때 문 입 니 다.
8.조합 계승(원형 대상+차용 구조 함수)
이상 의 분석 을 통 해 단일 한 원형 계승 의 단점 은 다음 과 같다.
1.매개 변 수 를 전달 할 수 없습니다.예 를 들 어,
Teacher.prototype = new Person();
어떤 사람들 은 작은 괄호 뒤에 매개 변 수 를 따라 갈 수 있다 고 말한다.맞 아.하지만 매개 변수,하위 클래스 의 모든 인 스 턴 스 속성 이 이것 과 같 으 면 솔직히 매개 변 수 를 전달 할 수 없다.
2.인용 유형 을 원형 대상 에 놓 으 면 서로 다른 사례 에서 서로 영향 을 줄 수 있다.
단일 차용 구조 함수 의 단점:
1.부모 클래스 로 복사 할 수 없 는 방법
원형 대상 방식 의 단점 에 딱 맞 게 구조 함 수 를 빌려 서 보완 할 수 있 고 구조 함수 의 단점 을 빌려 서 원형 대상 방식 으로 보완 할 수 있 기 때문에 조합 계승 방법 이 생 겼 다.

function Person( uName ){
 this.skills = [ 'php', 'javascript' ];
 this.userName = uName;
 }
 Person.prototype.showUserName = function(){
 return this.userName;
 }
 function Teacher ( uName ){
 Person.call( this, uName );
 }
 Teacher.prototype = new Person();

 var oT1 = new Teacher( 'ghostwu' );
 oT1.skills.push( 'linux' );
 var oT2 = new Teacher( 'ghostwu' );
 console.log( oT2.skills ); //php,javascript
 console.log( oT2.showUserName() ); //ghostwu

하위 클래스 인 스 턴 스 oT2 의 skills 는 oT1 의 영향 을 받 지 않 고 하위 클래스 의 인 스 턴 스 도 부모 클래스 로 호출 할 수 있 습 니 다.
이상 의 이[js 고수 의 길]은 원형 체인 부터 도해 계승 부터 그룹 계승 까지 상세 한 설명 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.