JavaScript 진급 - 1. 원형 과 원형 체인 의 개념

JavaScript 진급 - 1. 원형 과 원형 체인 의 개념
자 바스 크 립 트 원형 과 원형 체인 의 개념, 그리고 계승, new 연산 자 와 관련 된 개념 에 대해 자주 물 어 봅 니 다.본 고 는 원형 과 원형 체인 의 개념 을 전문 적 으로 정리 하고 대상 이 우리 의 뒤 를 계승 하 는 것 에 대해 소개 한다.본 고 는 대응 하 는 예시 코드 와 뇌 도 를 포함한다.기이 한 점 이 있 으 면 지적 을 환영 합 니 다!
목록 설명

1. 구조 함수 생 성 대상

2.

2.1 prototype

2.2 _proto_

2.3 constructor

3. 실례 와 원형 원형 과 원형

4. 원형 체인 이 어떻게 생 겼 는 지 (관련 관계 도 설명 첨부)

1. 구조 함수 생 성 대상
우 리 는 먼저 구조 함수 의 방식 으로 대상 을 설명 합 니 다.

function Person() {}
let person = new Person()
person.name = '  '
console.log(person.name) //   

위의 코드 에서Person 은 구조 함수 이 고 person 은 new 방식 으로 만 든 인 스 턴 스 대상 입 니 다.이제 한 코너 로 넘 어가 보도 록 하 겠 습 니 다.
2. 관련 명사 소개
prototype,constructor,__proto__우리 가 자주 보 는 몇 가지 개념 이지 만 그들 사이 의 관 계 는 구체 적 으로 어떤 것 인지 우 리 는 점차적으로 이해 하기 시작 했다.
2.1 prototype prototype ， Function.prototype.bind()， , prototype:

function Person() {}
Person.prototype.name = '  '
let person = new Person()
console.log(person.name) //   

Person 이 함 수 는 prototype 속성 을 설명 합 니 다. 이 값 이 가리 키 는 곳 은 도대체 어디 입 니까? 원형 대상 입 니까?
사실 prototype 은 현재 구조 함 수 를 호출 하여 인 스 턴 스 대상 의 원형, 즉 person 의 원형 을 만 드 는 것 을 가리킨다.
그렇다면 원형 은 무엇 일 까?사실 원형 은 ' JavaScript (null ) ， ， ， 。대응 하 는 관계 도 는 다음 과 같다.
2.2 proto
prototype 은 구조 함수 와 원형 대상 간 의 관 계 를 설명 했다. 그러면 인 스 턴 스 대상 과 원형 대상 간 의 관 계 는 어 떨 까?아래 설명. JavaScript (null )， __proto__ ，

function Person() {}
let person = new Person()
console.log(person.__proto__ === Person.prototype) // true
// ES5                 
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

이로부터 우리 위의 관리 학과 도 보 는 다음 과 같이 보충 할 수 있다.
2.3 constructor
위 에서 원형 대상 과 구조 함수, 실례 대상 간 의 관 계 를 설명 했다. 그러면 반대로 원형 대상 과 실례 대상 의 구조 함 수 를 얻 으 면 얻 을 수 있 지 않 을 까?constructor 는 이 정 도 는 할 수 있 습 니 다.constructor：

function Person() {}
let person = new Person()
//          
console.log(Person.prototype.constructor === Person) // true
//          
console.log(person.constructor === Person)  // true
//           constructor  
console.log(person.hasOwnProperty('constructor'))  // false

  ：
person.constructor        constructor   ，   person        constructor       person.constructor === Person。  

관계 도 는 다음 과 같이 보충 할 수 있다.
3. 실례 와 원형 원형 과 원형
3.1 실례 와 원형
대상 의 속성 을 읽 을 때 인 스 턴 스 대상 에서 찾 을 수 있 으 면 인 스 턴 스 대상 에 대응 하 는 value 로 돌아 가 고 찾 지 못 하면 인 스 턴 스 대상 의 원형 대상 에 서서 이 값 이 있 는 지, 있 는 지, 없 는 지 확인 하면 원형 대상 에 이 값 이 있 는 지 계속 찾 습 니 다.꼭대기 까지 알 아 낼 겁 니 다.

function Person() {}
Person.prototype.name = '  '

let person1 = new Person()
let person2 = new Person()

person2.name = '  '
console.log(person1.name) //  
console.log(person2.name) //  

그렇다면 원형 원형 은 무엇 을 수행 하 는 것 일 까?
3.2 원형 과 원형
실제로 원형의 원형 도 하나의 실례 대상 으로 Object 의 구조 함 수 를 통 해 생 성 되 기 때문에 원형의 원형 도proto__해당 하 는 원형 대상 의 속성 을 가 져 옵 니 다.

function Person() {}
Object.prototype.name = 'sunny'

let person1 = new Person()
let person2 = new Person()

console.log(person1.name) //sunny
console.log(person2.name) //sunny

대응 하 는 관계 도 는 다음 과 같다.
4. 원형 체인 이 어떻게 생 겼 는 지 (관련 관계 도 설명 첨부)

console.log(Object.prototype.__proto__ === null) // true

Object. prototype 의 원형 은 null 이 고 null 은 대상 이 없고 비어 있다 는 뜻 입 니 다.다시 말 하면 원형 대상 이 없다 는 뜻 이다. 이것 이 바로 찾 는 꼭대기 층 대상 이다.
전체 관계 도 는 다음 과 같이 정리 합 니 다.
관계 도 에서 빨간색 선 은 사실 우리 가 평소에 말 한 것 이다 .
확장 내용

우 리 는 함수 도 사실 하나의 대상 이라는 것 을 알 고 있 습 니 다. 모든 함 수 는 Function () 이 new 를 통 해 예화 한 결과 로 볼 수 있 습 니 다.따라서 Person 과 Object 를 인 스 턴 스 대상 으로 간주한다 면 그들의 원형 은 구조 함수 Function () 의 인 스 턴 스 대상 Function. prototype 을 가리킨다.

console.log(Person.__proto__ === Function.prototype) //true
console.log(Object.__proto__ === Function.prototype) //true

원형 대상 Function. prototype 의 constructor 는 구조 함수 Function 을 가리 키 며 Person 과 Object 자체 에 constructor 속성 이 없 지만 원형 대상 은 이 속성 이 있 기 때문에 구조 함수 도 얻 을 수 있 습 니 다.

console.log(Function.prototype.constructor === Function) // true
console.log(Person.constructor === Function) //true
console.log(Person.hasOwnProperty('constructor')) //false
console.log(Object.constructor === Function) //true
console.log(Object.hasOwnProperty('constructor')) //false

모든 함수 대상 은 Function 이 new 를 통 해 생 성 된 인 스 턴 스 대상 으로 볼 수 있 습 니 다. 그러면 Function 은 자신 이 실례 화 된 결 과 를 호출 한 것 으로 볼 수 있 습 니 다.따라서 Function 의 인 스 턴 스 대상 이 Function. prototype

을 가리 키 고 있 습 니 다.

console.log(Function.prototype === Function.__proto__) // true
console.log(Function.prototype === Function.prototype) //true

만약 에 이때 의 Function. prototype 을 실례 로 한다 면 그 자신의 실례 대상 은 누구 일 까요?모든 대상 은 Object 의 정례 화 된 결과 로 볼 수 있다.따라서 Function. prototype 의 원형 대상 은 Object. prototype 이 고 그 원형 함 수 는 Object () 입 니 다.

console.log(Function.prototype.__proto__ === Object.prototype);  //true

이 모든 것 을 정리 한 후에 우리 의 관계 도 는 다음 과 같이 되 었 다.
참고 문장
JavaScript 깊이 있 는 원형 에서 원형 체인 까지
JS 의 원형 을 이해 하 는 그림 (prototype, proto, constructor 의 삼각 관계)