JavaScript 프로토타입 체인에 대한 자세한 그래픽 설명

관련 권장 사항: JavaScript 튜토리얼

1. 프로토타입 체인

1.1 프로토타입 체인 설명:

1. (개념) 프로토타입 체인은 __proto__ 포인터를 통해 일부 프로토타입으로 구성된 연결 목록을 의미하며 프로토타입 체인에서 데이터를 공유하려는 객체를 서비스할 수 있으며 사용됩니다. JavaScript 상속 메커니즘을 구현합니다.

2. (프로토타입 체인 포인터) 프로토타입 체인에 관련된 포인터:

   • 각 객체에는 객체의 프로토타입에 액세스하기 위한 __proto__ 포인터가 있습니다.
   • 각 프로토타입은 상속을 구현하는 데 사용되는 객체이며, __proto__ 포인터를 가리키는 생성자 포인터도 있습니다.
   각 함수는 객체입니다
   • .
   • __proto__ 포인터 외에도 이와 관련된 프로토타입 객체를 가리키는 프로토타입 포인터가 있습니다. 프로토타입 포인터와 __proto__ 포인터가 반드시 동일할 필요는 없습니다.

1.2 상속을 포함하지 않는 프로토타입 체인의 그림:

1. 생성자 유형 프로토타입 체인: 프로토타입 체인이 제공하는 객체는 생성자에 의해 생성됩니다 (이 그림은 기본 체인과 관련되어 매우 중요하며 인터넷에 유사한 그림이 있습니다).

함수 A() {

}
a1 = 새로운 A()라고 놔두세요
a2 = 새로운 A()라고 놔두세요
a3 = 새로운 A()라고 놔두세요
// 이 코드 줄은 아래와 같은 프로토타입 체인을 생성합니다.

2. 비생성자 유형 프로토타입 체인: 프로토타입 체인이 제공하는 객체는 팩토리 함수, 객체 리터럴, Object.create 등에 의해 생성됩니다.

let A = {
    시험: ""
}
a1 = Object.create(A)하자
a2 = Object.create(A)를 보자
a3 = Object.create(A)하자
// 이 코드 줄은 아래 표시된 프로토타입 체인에 해당합니다.

3. 단순화된 프로토타입 체인: 실제로 프로토타입 체인을 고려할 때 "생성자 Function의 인스턴스에 해당하는 프로토타입 체인"이나 심지어 "프로토타입 체인 끝점" 및 "Object.prototype"까지 고려할 필요가 없는 경우가 많습니다. 왜냐하면 이러한 낮은 수준의 내용을 고려하는 것은 복잡한 상속 관계 분석에 도움이 되지 않기 때문입니다. 일반적인 분석을 위해 다음 두 가지 단순화된 다이어그램을 사용할 수 있습니다.

함수 A() {

}
a1 = 새로운 A()라고 놔두세요
a2 = 새로운 A()라고 놔두세요
a3 = 새로운 A()라고 놔두세요
// 이 코드 줄은 아래와 같은 프로토타입 체인을 생성합니다.

1.3 상속과 관련된 프로토타입 체인 그림

상속과 관련된 프로토타입 체인은 단순화된 다이어그램을 사용하여 분석할 수 있습니다.

// 기생 조합 모드를 사용하여 상속된 함수 구현 C() {}
함수 B() {}
B.prototype = 새로운 C()
함수 A() {}
A.prototype = 새로운 B()

a1 = 새로운 A()라고 놔두세요
a2 = 새로운 A()라고 놔두세요
a3 = 새로운 A()라고 놔두세요

1.4 프로토타입 체인의 끝점

프로토타입 체인의 끝점은 null이며 이는 프로토타입 객체를 참조하지 않습니다

1.5 프로토타입의 역학

프로토타입의 역학은 "객체 지향 프로그래밍"에 자세히 설명되어 있습니다. 주로 프로토타입을 다시 작성하고 수정하는 작업이 포함됩니다. 다음은 몇 가지 예입니다.
예 1 - 프로토타입 역학

var A = function() {};
A.prototype.n = 1;
var b = 새로운 A();
A.프로토타입 = {
    n: 2,
    남: 3
}
var c = 새로운 A();

console.log(bn); // 1
console.log(bm); // 정의되지 않음

console.log(cn); // 2
console.log(cm); // 3

예시 2 - 프로토타입 및 프로토타입 체인 하단 체인의 동역학

var F = function() {};

Object.prototype.a = 함수() {
    console.log('a');
};

Function.prototype.b = 함수() {
    console.log('b');
}

var f = 새로운 F();

파(); //
fb(); // b 속성이 존재하지 않습니다. Fa();
Fb(); // b

위에서 언급한 "상속을 포함하지 않는 프로토타입 체인 다이어그램"의 첫 번째 그림을 참조하면 다음과 같은 단순화된 참조 다이어그램 분석 문제를 그릴 수 있습니다.

예 3 - 프로토타입 역학 및 프로토타입 체인 하단 체인

기능 Person(name) {
    this.name = 이름
}
p = new Person('톰');
console.log(p.__proto__) // Person.prototype
console.log(Person.__proto__) // Function.prototype

예 4 - 프로토타입 역학 및 프로토타입 체인 하단 체인

var foo = {}, F = function(){};
Object.prototype.a = '값 a';
Function.prototype.b = '값 b';
객체.프로토타입 = {
    a: "a 값"
}
함수.프로토타입 = {
    b: "값 b"
}

console.log(foo.a); // 값
console.log(foo.b); // 정의되지 않음

console.log(Fa); // 값
console.log(Fb); // 값 b는

위에서 언급한 "상속을 포함하지 않는 프로토타입 체인 다이어그램"의 첫 번째 그림을 참조하여 다음과 같은 단순화된 참조 다이어그램 분석 문제를 그립니다. foo와 F는 선언 시 프로토타입을 바인딩하므로 스택 메모리에 저장된 포인터를 통해 힙 메모리에 저장된 프로토타입의 주소를 얻습니다. 먼저 프로토타입이 수정됩니다. 수정 작업은 힙 메모리의 프로토타입을 수정하며 F는 여전히 스택 메모리의 포인터를 통해 수정된 결과에 액세스할 수 있습니다. 두 번째 단계는 프로토타입을 다시 작성하는 것입니다. JS는 모두 "값 전송 작업"입니다. 프로토타입을 다시 작성한 후 먼저 힙 메모리에 새 공간을 열어 새 프로토타입을 저장한 다음 스택 메모리에 새 공간을 엽니다. 힙 메모리에 포인터를 저장합니다. 이때 foo와 F가 보유한 스택 메모리 포인터가 새로운 스택 메모리 포인터와 다르기 때문에 foo와 F는 다시 작성된 프로토타입에 접근할 수 없습니다.

관련 권장사항: JavaScript 학습 튜토리얼

위는 그림과 텍스트로 JavaScript 프로토타입 체인에 대한 자세한 설명입니다. 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 참고하세요!