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

이 기사에서는 프로토타입 체인과 관련된 문제를 주로 소개하는 javascript에 대한 관련 지식을 제공합니다. 프로토타입 체인은 __proto__ 포인터를 통해 일부 프로토타입으로 구성된 링크 목록을 의미하며 프로토타입 객체 서비스를 공유하는 데 사용할 수 있습니다. 체인의 데이터에 대해 모두에게 도움이 되기를 바랍니다.

관련 추천: javascript tutorial

1. 프로토타입 체인

1.1 프로토타입 체인 설명:

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

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

   • 각 객체에는 객체의 프로토타입에 액세스하기 위한 __proto__ 포인터가 있습니다.
   • 각 프로토타입은 상속을 구현하는 데 사용되는 포인터입니다. 포인터, 객체에는 생성자를 가리키는 생성자 포인터도 있습니다. 각 함수는 객체입니다. __proto__ 포인터 외에도 프로토타입 객체를 가리키는 프로토타입 포인터도 있습니다. 포인터와 __proto__ 포인터는 없습니다. 반드시 동일합니다.
1.2 상속을 포함하지 않는 프로토타입 체인의 그림:

생성자 유형 프로토타입 체인: 프로토타입 체인에서 제공하는 객체는 생성자에 의해 생성됩니다.

(이 그림은 기본 체인과 관련된 매우 중요합니다. 인터넷 사진에도 비슷한 것들이 있습니다)

1. function A() {
   
   }
   let a1 = new A()
   let a2 = new A()
   let a3 = new A()
   // 这几行代码会产生下面图示的原型链

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

2. let A = {
       test: ""
   }
   let a1 = Object.create(A)
   let a2 = Object.create(A)
   let a3 = Object.create(A)
   // 这几行代码对应下面图示的原型链

Simplified 프로토타입 체인 : 실제로 프로토타입 체인을 고려할 때 "생성자 Function의 인스턴스에 해당하는 프로토타입 체인"이나 심지어 "프로토타입 체인 끝점"과 "객체"까지 고려할 필요가 없는 경우가 많습니다. .원기". 왜냐하면 이러한 낮은 수준의 내용을 고려하는 것은 복잡한 상속 관계 분석에 도움이 되지 않기 때문입니다.

일반적인 분석을 위해서는 아래의 두 가지 단순화된 다이어그램을 사용하세요.

3. function A() {
   
   }
   let a1 = new A()
   let a2 = new A()
   let a3 = new A()
   // 这几行代码会产生下面图示的原型链

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

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

// 使用寄生组合模式实现继承
function C() {}
function B() {}
B.prototype = new C()
function A() {}
A.prototype = new B()

let a1 = new A()
let a2 = new A()
let a3 = new A()

1.4 프로토타입 체인의 끝점

의 끝점 프로토타입 체인은 null이며 특정 프로토타입 객체를 참조합니다

1.5 프로토타입의 역학

프로토타입의 역학은 주로 프로토타입의 재작성 및 수정과 관련된 "객체 지향 프로그래밍"에 자세히 설명되어 있습니다. 다음은 몇 가지 예입니다.

예시 1—프로토타입의 동역학

var A = function() {};
A.prototype.n = 1;
var b = new A();
A.prototype = {
    n: 2,
    m: 3
}
var c = new A();

console.log(b.n); // 1
console.log(b.m); // undefined

console.log(c.n); // 2
console.log(c.m); // 3

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

var F = function() {};

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

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

var f = new F();

f.a(); // a
f.b(); // 并不存在b属性

F.a(); // a
F.b(); // b

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

예 3—프로토타입 동역학 및 프로토타입 체인의 최하위 체인

function Person(name) {
    this.name = name
}
let p = new Person('Tom');
console.log(p.__proto__) //  Person.prototype
console.log(Person.__proto__) // Function.prototype

예 4—프로토타입 동역학 및 프로토타입 체인의 최하위 체인

var foo = {}, F = function(){};
Object.prototype.a = 'value a';
Function.prototype.b = 'value b';
Object.prototype = {
    a: "value a"
}
Function.prototype = {
    b: "value b"
}

console.log(foo.a); // value a
console.log(foo.b); // undefined

console.log(F.a); // value a
console.log(F.b); // value b

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

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

관련 추천:

자바스크립트 학습 튜토리얼

위 내용은 JavaScript 프로토타입 체인에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!