한 문제 에서 JS 원형 체인 을 해독 하 다.

그 전에 js 원형 과 원형 체인 에 대한 이 해 는 매우 복잡 하 다 고 느 꼈 다. 과 각종 글 을 본 후에 원형 과 원형 체인 에 대해 초보적인 이 해 를 가지 게 되 었 지만 깊이 이해 하지 못 했다. 이번 에는 예전 에 만 났 던 문 제 를 통 해 분석 하고 자신의 생각 으로 해석 했다.원형 과 원형 체인 에 대한 자신의 이 해 를 깊이 있 게 하 다.
제목
다음 프로그램 실행 결 과 는 무엇 입 니까?

function Animal() {
    this.name = 'Animal';
}

Animal.prototype.changeName = function (name) {
    this.name = name;
}

function Cat() {
    this.name = 'Cat';
}

var animal = new Animal();

Cat.prototype = animal;
Cat.prototype.constructor = Cat;

var cat = new Cat();

animal.changeName('Tiger');

console.log(cat.name)

A. AnimalB. Cat C. Tiger D. 는 아니에요.
정 답 은 B Cat 입 니 다.
해독
1. 원형 대상
언제든지 새 함 수 를 만 들 면 특정한 규칙 에 따라 이 함수 에 하 나 를 만 듭 니 다.prototype 속성, 이 속성 은 함수 의 원형 대상 을 가리킨다.기본 적 인 상황 에서 모든 원형 대상 은 자동 으로 하 나 를 얻 을 수 있 습 니 다.constructor (구조 함수) 속성, 이 속성 은 지향 입 니 다.prototype 속성 이 있 는 함수 의 지침.
다음은 그림 으로 설명 하 겠 습 니 다.

function Animal() {
    this.name = 'Animal';
}
Animal.prototype.changeName = function (name) {
    this.name = name;
}

먼저 Animal 함 수 를 만 들 었 습 니 다. Animal 에는 하나의 prototype 속성 이 있 고 Animal Prototype 을 가리 키 며 Animal.prototype.constructor Animal 을 가리 키 고 있 습 니 다.이 때 name 속성 은 함수 에서 정의 되 기 때문에 Animal Prototype 에 있 지 않 고 changeName 함 수 는 Animal.prototype.changeName 을 통 해 정의 되 기 때문에 우 리 는 이러한 방식 으로 여러 대상 을 예화 할 때 원형 이 저 장 된 방법 을 공유 할 수 있다.마찬가지 로 Cat 함 수 를 만 들 었 을 때 도 마찬가지 입 니 다.

function Cat() {
    this.name = 'Cat';
}

2. 인 스 턴 스 생 성
구조 함 수 를 호출 하여 새로운 인 스 턴 스 를 만 든 후 이 인 스 턴 스 의 내 부 는 포인터 (내부 속성) 를 포함 하여 구조 함수 의 원형 대상 을 가리킨다.ECMA - 262 5 판 에서 이 지침 을[[Prototype]] 。스 크 립 트 에 표준 접근 방식 이 없 지만[[Prototype]] 그러나 Firefox, Safari, Chrome 은 모든 대상 에서 하나의 속성 을 지원 합 니 다.__proto__ 。명확 하고 중요 한 점 은 이 연결 은 실례 와 구조 함수 의 원형 대상 사이 에 존재 하 는 것 이지 실례 와 구조 함수 사이 에 존재 하 는 것 이 아니다.

//  Cat       animal  ，  animal    ，       
Cat.prototype = animal;

이 부분 은 Cat 의 원형 대상 의 지침 을 animal 인 스 턴 스 를 가리 키 는 것 과 같 습 니 다. 그래서 원래 Cat 원형 대상 중의 constructor 속성 을 잃 어 버 리 고 animal 인 스 턴 스 중의 속성 으로 바 꾸 었 습 니 다. name 속성 과 __proto__ 내부 속성 을 포함 하고 같은 시간 __proto__ 속성 도 Animal.prototype 을 가리 키 고 있 습 니 다.따라서 Cat 도 원형 체인 을 통 해 Animal 에 호출 된 속성 과 방법 을 찾 을 수 있다.

//         constructor，  Cat    
Cat.prototype.constructor = Cat;

이 부분 은 원형 대상 에 하나의 constructor 속성 을 다시 만 들 고 Cat 구조 함 수 를 가리 키 는 것 과 같다.

var cat = new Cat();   //      Cat  ，    Animal  

3. 호출 방법

animal.changeName('Tiger');

var animal = new Animal(); 하나의 Animal 대상 을 예화 한 후에 animal 모두 내부 속성 을 포함 하고 이 속성 은 Animal.prototype 을 가리킨다.다시 말 하면 animal 구조 함수 Animal 과 직접적인 관계 가 없다.그러나 실례 에 포함 되 지 않 았 지만 changeName 호출 할 수 있 습 니 다 animal.changeName(name). 이것 은 대상 속성 을 찾 는 과정 을 통 해 이 루어 진 것 입 니 다. 즉,
먼저 실례 중의 실례 animal 에 changeName 방법 이 있 는 지, 없 으 면 계속 찾 고, Animal.prototype 에 가서 changeName 방법 이 있 는 지, 있 으 면 호출 하고, 없 으 면 계속 찾 고, Object.prototype 에서 찾 고, 마지막 에 찾 지 못 하면 하나 null 로 돌아간다.
분명 한 것 은 이 인 스 턴 스 animal 에 changeName 방법 이 없 기 때문에 Animal.prototype 에서 changeName 방법 을 찾 아야 하고 인 스 턴 스 animal 중의 name 속성 을 성공 적 으로 수정 하여 Tiger 로 호출 해 야 한다.
이때 Cat.prototype 는 인 스 턴 스 animal 를 가리 키 기 때문에 Cat.prototype 중의 name 속성 도 Tiger 로 바 뀌 었 다.

console.log(cat.name)  // Cat

마지막 으로 획득 cat.name 은 검색 방법 과 마찬가지 로 인 스 턴 스 cat 에서 name 속성 이 있 는 지 찾 아 보 는 것 이 분명 하 므 로 찾 아 보 는 것 을 끝 냅 니 다. 이때 cat.name = 'Cat'.
3. 총화
이 문 제 를 통 해 저 는 원형 과 원형 체인 에 대한 이 해 를 깊이 있 게 했 습 니 다. 사실은 이 문 제 는 계승 에 관 한 지식 으로 확대 할 수 있 습 니 다. 자바 스 크 립 트 에서 계승 을 실현 하 는 것 은 주로 원형 체인 에 의 해 이 루어 집 니 다.그 다음 에 내 가 좀 더 확실하게 알 아 보고 계속 써.
이 글 은 본인 이 원형 과 원형 체인 에 대한 작은 이해 입 니 다. 중간 에 편차 나 오류 가 있 을 수 있 습 니 다. 많이 지적 해 주세요!!