원형 원형 체인 깊이 분석

원형

원형은 함수 특유의 구조 함수로 대상을 만든 공공 조상이다.이 구조 함수를 통해 생성된 대상은 이 원형의 속성과 방법을 계승할 수 있다.
우리 먼저 구조 함수를 하나 쓰자

function Person() {

}
var person = new Person();
person.name = 'luoxi';
console.log(person.name) // luoxi

이 예에서 Person은 하나의 구조 함수입니다. 우리는 new를 사용하여 실례적인 대상인person을 만들었습니다.
간단하죠, 이제 본론으로 들어갈게요.

prototype

모든 함수에prototype 속성이 있는데 바로 우리가 자주 여러 가지 예에서 보는prototype이다. 예를 들어 다음과 같다.

function Person() {

}
//  ， ：
// prototype 
Person.prototype.name = 'luoxi';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // luoxi
console.log(person2.name) // luoxi

그러면 이 함수의protype 속성은 도대체 무엇을 가리키는 것입니까?이 함수의 원형입니까?
사실 함수의prototype 속성은 하나의 대상을 가리킨다. 이 대상은 바로 이 구조 함수를 호출하여 만든 실례의 원형이다. 즉, 이 예의person1과person2의 원형이다.
그럼 원형이 뭐예요?이렇게 이해할 수 있다. 모든 자바스크립트 대상 (null 제외) 은 만들 때 다른 대상과 연결된다. 이 대상은 우리가 말한 원형이고, 모든 대상은 원형에서 속성을 계승한다.

proto

이것은 모든 자바스크립트 대상(null 제외)이 가지고 있는 속성입니다. 이라고 합니다.proto__,이 속성은 이 대상의 원형을 가리킨다.

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

주의: 함수는prototype을 통해서만 원형에 접근할 수 있으며, 이미 접근한 원형 대상은 함수 대상이 아니라 일반 대상이 됩니다.즉 개인을 일반 대상으로 하는 것이다.

constructor

모든 원형에는 constructor 속성이 연결된 구조 함수를 가리킨다.

function Person() {

}
console.log(Person === Person.prototype.constructor); // true

결국 우리는 다음과 같은 결과를 얻었다.

function Person() {

}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
//  ES5 , 
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

구조 함수, 인스턴스 프로토타입, 인스턴스 간의 관계를 이해한 다음 인스턴스와 프로토타입의 관계에 대해 설명합니다.

인스턴스와 원형

실례의 속성을 읽을 때 찾지 못하면 대상과 관련된 원형의 속성을 찾고, 찾지 못하면 원형의 원형을 찾아 맨 윗부분까지 찾는다.

function Person() {

}

Person.prototype.name = 'Kevin';

var person = new Person();

person.name = 'Daisy';
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin

이 예에서, 우리는 실례 대상인 개인에게name 속성을 추가해서, 개인을 인쇄할 때.name일 때 결과는 자연히 Daisy입니다.
그러나 개인의name 속성을 삭제했을 때 개인을 읽습니다.name,person 대상에서 name 속성을 찾지 못하면 person의 원형인 person에서 찾을 수 있습니다.프로토, 즉 페르슨.prototype에서 찾았는데, 다행히도 우리는name 속성을 찾았고, 결과는 Kevin이었다.
그런데 만약에 아직 못 찾았으면?원형의 원형은 또 무엇일까요?

원형

앞에서 우리는 원형도 하나의 대상이라고 말했는데 대상이라면 가장 원시적인 방식으로 그것을 만들 수 있다. 바로 다음과 같다.

var obj = new Object();
obj.name = 'luoxi'
console.log(obj.name) // Kevin

사실 원형 대상은 Object 구조 함수를 통해 생성된 것이다. 앞에서 말한 바와 결합하여 실례적인 프로토는 구조 함수의prototype을 가리킨다

원형 체인

그럼 Object.프로토타입의 원형은요?
null, 인쇄할 수 있습니다:

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

그런데null은 도대체 무엇을 대표하는가?
완일봉 선생님의 《undefined와null의 차이》를 인용하면 다음과 같다.
null은 "대상이 없음"을 표시합니다. 즉, 이 곳에 값이 있을 수 없습니다.
그래서 Object.prototype.proto의 값은 null 및 Object입니다.prototype은 원형이 없는데 사실은 하나의 뜻을 나타낸다.
그래서 속성을 찾을 때 Object를 찾습니다.prototype은 검색을 중지할 수 있습니다.

보태다

마지막으로 여러분이 주의하지 않을 수 있는 세 가지를 보충합니다. constructor는 먼저 constructor 속성입니다. 예를 들어 다음과 같습니다.

function Person() {

}
var person = new Person();
console.log(person.constructor === Person); // true

개인을 가져오면constructor일 때, 사실person에는 constructor 속성이 없습니다. constructor 속성을 읽을 수 없을 때, person의 원형인 Person에서 시작합니다.prototype에서 읽을 때 원형에 이 속성이 있기 때문에:

erson.constructor === Person.prototype.constructor

프로토의 그 다음은 프로토이다. 대부분의 브라우저가 이 비표준적인 방법으로 원형에 접근하는 것을 지원하지만, 프로토는 Person에 존재하지 않는다.prototype에서, 실제로는 Object에서 나온 것입니다.prototype, 하나의 속성이라기보다는 Getter/setter입니다. obj를 사용할 때.proto에서는 Object를 반환한 것으로 이해할 수 있습니다.getPrototypeOf(obj).
진짜 상속인가요?
마지막으로 상속에 대해 앞에서 우리는'모든 대상이 원형에서'상속'속성을 계승한다'고 말했는데 실제로 상속은 매우 현혹적인 표현이다. 에서 언급한 바와 같이 다음과 같다.
상속은 복사 작업을 의미하지만 자바스크립트는 기본적으로 대상의 속성을 복제하지 않는다. 반대로 자바스크립트는 두 대상 사이에 하나의 연관성을 만들 뿐이다. 그러면 한 대상이 다른 대상의 속성과 함수에 의뢰를 통해 접근할 수 있기 때문에 계승이라고 하기보다는 의뢰라는 말이 더 정확하다.