자 바스 크 립 트 계승 체 계 를 깊이 있 게 분석 하 다.

최근 웹 프로젝트 를 하면 서 jquery 등 프레임 워 크 를 접 했 습 니 다.사용 이 편리 하지만 자 바스 크 립 트 를 배우 고 싶 습 니 다.오늘 은 최근 js 원형 계승 에 대한 이 해 를 공유 하고 부족 한 점 은 지적 해 주 십시오.
1.구조 기의 원형 속성 과 원형 대상
js 를 처음 접 했 을 때 보통 바 가 지 를 그 리 며 함수 new 의 인 스 턴 스 를 사용 합 니 다.그 원인 도 모 르 고 js 에서 함수 가 대상 이 라 고 만 들 었 습 니 다.원래 js 에 서 는 자바 등 언어 중의 클래스 계승 체 계 를 사용 하지 않 고 원형 대상(prototype)을 사용 하여 계승 체 계 를 실현 하 였 으 며,구체 적 으로 는'구조 기'를 이용 하여 클래스 의 기능 을 실현 하 였 다.
먼저 원형 계승 중의 두 가지 중요 한 개념 을 설명 한다.원형 속성,원형 대상(사례)이다.
js 대상 시스템 의 경우 만 든 모든 함수(구조 기)는 prototype 원형 속성 을 가지 고 있 으 며,구조 기 를 통 해 만 든 모든 대상 인 스 턴 스 도 하나의 를 포함 하고 있 습 니 다.proto_속성,prototype 과proto_속성 은 포인터 로 원형 대상 을 가리킨다.일반 함수 와 구조 함수 의 유일한 차 이 는 원형 속성 prototype 이 의미 있 는 값 이 아니 냐 는 것 이다.
프로 토 타 입 속성 prototype 이 가리 키 는 프로 토 타 입 은 대상 인 스 턴 스(Object instance)입 니 다.구체 적 으로 다음 그림 에서 보 듯 이 구조 기 Animal()에 원형 대상 B 가 있 으 면 이 구조 기 가 만 든 인 스 턴 스 는 반드시 B 에 복 사 됩 니 다.즉,Animal()의 인 스 턴 스 a1 의proto_속성 도 원형 대상 B 를 가리킨다.따라서 실례 a1 은 B 의 모든 속성,방법 과 기타 성질 을 계승 할 수 있다.

그림 1 js 대상 실례 화 실현
2.빈 대상
자 바스 크 립 트 에서'빈 대상'은 전체 원형 계승 체계의 기초 이 고 모든 대상 의 기초 이다.'빈 대상'을 소개 하기 전에'빈 대상(null)'을 먼저 소개 해 야 한다.
빈 개체 null
null 은'빈 대상'이 아 닙 니 다.자바 script 의 보존 글자 로 서 그 의 미 는:
(1)대상 유형 에 속 함
(2)대상 은 빈 값
대상 형식 으로 for...in 을 사용 하여 열거 할 수 있 지만 빈 값 으로 null 은 방법 과 속성 이 없습니다(constructor, 포함).proto_등 속성)이 므 로 어떤 내용 도 열거 할 수 없습니다.다음 과 같은 예 에서 보 듯 이:

var num=0；
　　for(var propertyName in null)
　　{
　　num++;
　　}

　　Alert(num);//표시 값 0
가장 중요 한 것 은 null 에 원형 이 없다 는 것 입 니 다.Object()구조 기(또는 하위 클래스)에서 예화 한 것 이 아니 라 인 스 턴 스 of 연산 을 하면 false 로 돌아 갑 니 다.
2."빈 대상"
'빈 대상'은 표준 적 이 고 Object()를 통 해 구 성 된 대상 인 스 턴 스 를 말한다.예 를 들 면:

obj=new Object();  obj={}；

'빈 대상'은'대상'의 모든 특성 을 가지 기 때문에 toString(),valueof 등 미리 정 의 된 속성 과 방법 을 액세스 할 수 있 습 니 다.
3.'빈 대상'과 null 의 관계
아래 그림 2 에서 보 듯 이 빨 간 선 이 보 이 는 경 로 는"Object.prototype."을 통과 해 야 합 니 다.proto_”Object 프로 토 타 입 대상 의-proto-속성 을 가 져 올 때"null"을 얻 습 니 다.null 대상 은 속성 이 없 기 때문에"Object{}"입 니 다.
원형 대상 이 원형 체인 의 종점 이다.

그림 2 js 류 계승 체계
3.Javascript 계승 실현 및 원형 체인 유지
(1)상속 의 실현
첫 번 째 절 에서 javascript 에서 클래스 계승 은 구조 함수 의 원형 속성 prototype 을 수정 하여 이 루어 진 것 이 라 고 말 했다.다음 코드 와 같이:

function Animal() {
this.name = 'Animal';
};
function Dog() {
};
　　Dog.prototype = new Animal();
var d = new Dog();
console.log(d.name);//'Animal'

Animal 형식의 인 스 턴 스 를 만 들 고 구조 함수 Dog()의 prototype 속성 에 값 을 부여 함으로써 유형 계승 을 실현 합 니 다.즉,Animal 은 Dog 의 부모 클래스 입 니 다.이렇게 Dog 형식의 인 스 턴 스 d 도 Animal 형식의 name 속성 에 접근 할 수 있 습 니 다.
(2)원형 체인
JS 대상 계승 체계 에는 두 가지 원형 체인 이 있 는데 그것 이 바로'내부 원형 체인'과'구조 기 원형 체인'이다.그림 3 에서 보 듯 이 검은색 화살표 지시 경 로 는 구조 함수 의 prototype 속성 을 통 해 유지 되 는'구조 기 원형 체인'이다.빨간색 화살표 지시 경 로 는 대상 인 스 턴 스 를 통 해proto_속성 이 유 지 된'내부 원형 체인'입 니 다.

그림 3 원형 체인
(3)원형 체인 유지보수
그림 3 은 구조 기 가 표 시 된 prototype 을 통 해 원형 체인 을 구축 하고 대상 인 스 턴 스 도proto _속성 은 원형 체인 을 구축 했다.때문에proto _접근 할 수 없 는 내부 속성 입 니 다(Chrome 에서 대상 보기 가능proto _속성의 값 이지 만 수정 할 수 없습니다).따라서 하위 클래스(Dog)의 인 스 턴 스 dog 1 부터 전체 프로 토 타 입 체인 에 접근 할 수 없습니다.따라서 우 리 는 그림 3 의'내부 원형 체인'과'구조 기 원형 체인'에서 연결 점 을 찾 아 인 스 턴 스 가 obj 에 접근 할 수 없 도록 해 야 한다.proto_의 경우 구조 기 를 통 해 내부 원형 체인 에 접근 합 니 다(두 가지 원형 체인 을 연결 합 니 다).
하위 클래스 의 인 스 턴 스 부터 전체 프로 토 타 입 체인 에 접근 하려 면 인 스 턴 스 의 constructor 속성 으로 프로 토 타 입 체인 을 유지 해 야 합 니 다.
사실 자바 스 크 립 트 는 구조 기 에 원형 속성 을 유지 하고 있 습 니 다.다음 테스트 코드 에 따라 구조 기 를 사용자 정의 할 때 원형 대상 은 Object()형식의 인 스 턴 스 이지 만 원형 대상 의 constructor 속성 은 기본적으로 구조 기 자신 을 가리 키 며 부모 클래스 Object 를 가리 키 지 않 습 니 다.그림 4 에서 구조 기 인 스 턴 스 의 파란색 상자 에 있 는 constructor 속성 은 이 constructor 속성 이 원형 대상 에 계승 되 기 때문에 사용자 정의 구조 기 가 만 든 인 스 턴 스 를 얻 을 수 있 습 니 다.constructor 속성 은 기본적으로 이 구조 기 를 가리 키 고 있 습 니 다.

function Animal() {
};
var a = new Animal();
console.log(Animal.prototype);//Object(){}
console.log(Animal.prototype.constructor === Animal);//true//true

　　
그림 4
그래서proto_속성 에 접근 할 수 없 을 때 a1.constructor.prototype 을 통 해 인 스 턴 스 a1 의 원형 대상 을 가 져 올 수 있 습 니 다.그러나 구조 함수 Dog()를 사용자 정의 하고 prototype 속성 값 을 Animal 로 수 동 으로 지정 합 니 다.즉,Dog 의 부 류 를 Animal 로 지정 합 니 다.이 때 d1.constructor 값 은 Dog 가 아 닌 Animal 입 니 다.그림 5 에서 보 듯 이 Dog 의 원형 대상 과 dog 은 각각 Animal()과 Dog()두 개의 서로 다른 구조 기 에 의 해 생 성 되 었 으 나 그들의 constructor 속성 은 같은 구조 기(Animal)를 가리 키 며 constructor 속성 을 사용 하여 두 개의 원형 체인 을 연결 하 는 구상 과 충돌 했다.

그림 5
구조 기 에 문제 가 생 긴 것 입 니까?아니면 원형 에 문제 가 생 긴 것 입 니까?그림 5 에서 알 수 있 듯 이 원형 계승 이 요구 하 는'복제 행위'가 정확하게 실현 되 었 고 하위 클래스 인 스 턴 스 에서 원형 대상 속성 에 접근 할 수 있다.문 제 는 하위 구조 기 Dog()에 원형 대상 을 부여 할 때 해당 원형 대상 의 구조 속성 값(constructor)을'수정'해 야 한 다 는 것 이다.ECMAScript 3 표준 이 제공 하 는 방법 은 원형 구조 기 속성 을 유지 하고 하위 구조 기 에서 인 스 턴 스 대상 의 구조 속성 을 초기 화 하 는 것 입 니 다.코드 는 다음 과 같 습 니 다:

function Dog () {
　　//   constructor  
　　 this.constructor=Dog; //  this.constructor=arguments.callee;
　　};
　　Dog.prototype = new Animal();//      ，    

그림 6
constructor 속성"수정"후 효 과 는 그림 6 과 같 습 니 다.하위 구조 기 Dog 에서 인 스 턴 스 대상 의 constructor 속성 을 초기 화한 후 Dog 의 인 스 턴 스 대상 의 constructor 는 Dog 를 가리 키 고 Dog 의 원형 대상 의 constructor 는 부모 형식 구조 기 Animal 을 가리 키 고 있 습 니 다.이렇게 하면 constructor 속성 을 이용 하여 원형 체인 을 연결 할 수 있 고 하위 사례 에서 전체 원형 체인 을 거 슬러 올 라 갈 수 있다.
총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 자 바스 크 립 트 계승 체계 에 관 한 지식 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!