Explicación gráfica detallada de la cadena de prototipos de JavaScript

Recomendaciones relacionadas: Tutorial de JavaScript

1. Cadena de prototipos

1.1 Explicación de la cadena de prototipos:

1. (Concepto) La cadena de prototipos se refiere a una lista vinculada compuesta de algunos prototipos a través de punteros __proto__. Una cadena de prototipos puede servir a objetos que desean compartir datos en la cadena de prototipos y se utiliza. para implementar el mecanismo de herencia de JavaScript.

2. (Puntero de cadena de prototipo) Punteros involucrados en la cadena de prototipo:

   • cada objeto tiene un puntero __proto__ para acceder al prototipo del objeto.
   • Cada prototipo es un objeto que se utiliza para implementar la herencia. Además del puntero __proto__, también hay un puntero de constructor. para el constructor.
   • Cada función es un objeto. Además del puntero __proto__, también hay un puntero prototipo que apunta al objeto prototipo asociado a él. El puntero prototipo y el puntero __proto__ no son necesariamente iguales.

1.2 Ilustración de la cadena de prototipos que no implica herencia:

1. Cadena de prototipos de tipo constructor: el objeto servido por la cadena de prototipos es generado por el constructor (esta imagen es muy importante, involucra la cadena subyacente, y hay imágenes similares en Internet)

función A() {

}
sea ​​a1 = nueva A()
sea ​​a2 = nueva A()
sea ​​a3 = nueva A()
// Estas líneas de código generarán la cadena de prototipos que se muestra a continuación

2. Cadena de prototipos de tipo no constructor: los objetos servidos por la cadena de prototipos son generados por funciones de fábrica, literales de objetos, Object.create, etc.

let A = {
    prueba: ""
}
dejar a1 = Objeto.crear(A)
sea ​​a2 = Objeto.crear(A)
sea ​​a3 = Objeto.crear(A)
// Estas líneas de código corresponden a la cadena de prototipos que se muestra a continuación

3. Cadena de prototipo simplificada: al considerar realmente la cadena de prototipo, a menudo no es necesario considerar la "cadena de prototipo correspondiente a la instancia de la Función constructora", o incluso el "punto final de la cadena de prototipo" y "Objeto.prototipo". Porque considerar estos contenidos de bajo nivel no favorece el análisis cuando se trata de relaciones de herencia complejas. Para un análisis general, se pueden utilizar los siguientes dos diagramas simplificados.

función A() {

}
sea ​​a1 = nueva A()
sea ​​a2 = nueva A()
sea ​​a3 = nueva A()
// Estas líneas de código generarán la cadena de prototipos que se muestra a continuación

1.3 Ilustración de la cadena prototipo que involucra herencia

La cadena prototipo que involucra herencia se puede analizar usando un diagrama simplificado

// Use el modo de combinación parásita para implementar la función heredada C () {}
función B() {}
B.prototipo = nuevo C()
función A() {}
A.prototipo = nuevo B()

sea ​​a1 = nueva A()
sea ​​a2 = nueva A()
sea ​​a3 = nueva A()

1.4 El punto final

de la cadena del prototipo El punto final de la cadena del prototipo es nulo, lo que no se refiere a un objeto prototipo

1.5 La dinámica del prototipo

La dinámica del prototipo se explica en detalle en "Programación orientada a objetos". e implica principalmente la reescritura y modificación del prototipo. A continuación se muestran algunos ejemplos.
Ejemplo 1: Dinámica del prototipo

var A = function() {};
A.prototipo.n = 1;
var b = nueva A();
A.prototipo = {
    norte: 2,
    metro: 3
}
var c = nueva A();

consola.log(bn); // 1
console.log(bm); // indefinido

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

Ejemplo 2 - Dinámica de prototipo y cadena de prototipo cadena inferior

var F = function() {};

Objeto.prototipo.a = función() {
    console.log('a');
};

Función.prototipo.b = función() {
    consola.log('b');
}

var f = nueva F();

fa(); // un
fb(); // El atributo b no existe Fa(); // a
Fb(); //

bConsulte la primera imagen del "Diagrama de cadena prototipo que no implica herencia" mencionado anteriormente, puede dibujar el siguiente problema de análisis de diagrama de referencia simplificado.

Ejemplo 3: Dinámica de prototipos y cadena de prototipos

Función de cadena inferior Persona(nombre) {
    este.nombre = nombre
}
let p = nueva Persona('Tom');
console.log(p.__proto__) // Persona.prototipo
console.log(Person.__proto__) // Function.prototype

Ejemplo 4: Dinámica de prototipos y cadena inferior de cadena de prototipos

var foo = {}, F = function(){};
Object.prototype.a = 'valor a';
Function.prototype.b = 'valor b';
Objeto.prototipo = {
    a: "valor a"
}
Función.prototipo = {
    b: "valor b"
}

console.log(foo.a); // valor a
console.log(foo.b); // indefinido

console.log(Fa); // valor a
console.log(Fb); // el valor b

se refiere a la primera imagen del "Diagrama de cadena prototipo que no implica herencia" mencionado anteriormente para dibujar el siguiente problema de análisis de diagrama de referencia simplificado. Dado que foo y F vinculan sus prototipos cuando se declaran, obtienen la dirección del prototipo almacenado en la memoria del montón a través del puntero almacenado en la memoria de la pila. Primero, se modifica el prototipo. La operación de modificación modificará el prototipo en la memoria del montón y F aún puede acceder al resultado modificado a través del puntero de la memoria de la pila. El segundo paso es reescribir el prototipo. JS son todas "operaciones de transferencia de valor". Después de reescribir el prototipo, primero abra un nuevo espacio en la memoria del montón para almacenar el nuevo prototipo y luego abra un nuevo espacio en la memoria de la pila. para almacenar el puntero en la memoria del montón. En este momento, debido a que los punteros de memoria de la pila retenidos por foo y F son diferentes de los nuevos punteros de memoria de la pila, foo y F no pueden acceder al prototipo reescrito.

Recomendaciones relacionadas: Tutorial de aprendizaje de JavaScript

Lo anterior es una explicación detallada de la cadena de prototipos de JavaScript con imágenes y textos. Para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de PHP.