La entrevista preguntó cómo entender el prototipo js.

Primero, herencia basada en la cadena de prototipos

1. Propiedades heredadas

Los objetos JavaScript son "paquetes" de propiedades dinámicas (que se refieren a sus propias propiedades). Los objetos JavaScript tienen una cadena que apunta a objetos prototipo. Al intentar acceder a una propiedad de un objeto, no solo busca ese objeto, sino también el prototipo de ese objeto y el prototipo de ese objeto, y busca hacia arriba hasta encontrar una propiedad con un nombre coincidente o llega al final de la cadena de prototipos. . fin. El siguiente código demuestra el comportamiento que ocurre al acceder a las propiedades de un objeto:

[javascript]? ¿Mirando la llanura? Copiar

//?Supongamos que hay un objeto. oh,? ¿Cuál es su propio atributo (propio? atributo)? ¿respuesta? Entonces qué. B:

//?{a:? 1,?b:? 2}

//?o? ¿prototipo? o .[[Prototipo]] tiene atributos? ¿b? Entonces qué. C:

//?{b:? 3,?c:? 4}

//?Finalmente,? o .[[Prototipo]]. [[prototipo]]? ¿Qué pasa? nulo.

//?Este es el final de la cadena de prototipos, ¿verdad? Vacío,

//?Por definición, ¿nulo? No existe ningún [[Prototipo]].

//?En resumen, toda la cadena del prototipo es la siguiente:

//?{a: 1,? B: 2}? - gt;? {b:3,? c:4}? - gt;? ¿Consola vacía

. log(o . a);? //?1

//?¿Es A un atributo de O? Sí, el valor de este atributo es 1.

consola . log(o . b);? ///?2

//¿Es b un atributo de o? Sí, el valor de este atributo es 2.

//?o .También hay un atributo ' b ' en [[prototype]], pero no se accederá a él. Esta situación se llama "enmascaramiento de propiedad"?(property?shadow)".

console . log(o . c);?//?four

//?C es A propiedad de O? No, veamos si está en o.[[Prototype]].

//¿Es c una propiedad de o.[[Prototype]] Sí, este? es 4.

console . log(o . d);? //No está claro

//¿Es d un atributo de o? Mira si está en o .[[Prototipo ]]

//¿Es ?d un atributo de o.[[Prototype]]? No, veamos si está en o [[Prototype ]][[Prototype]]. >

//?o .[[Prototype]]. [[Prototype]] está vacío, deje de buscar

//?Si no hay ninguna propiedad, devolverá indefinido. /p>

La única excepción a las reglas de comportamiento del getter y del setter es cuando una propiedad se establece como una propiedad heredada. /p>

2. Métodos heredados

JavaScript no tiene "métodos". definido por otros lenguajes basados ​​​​en clases. En JavaScript, cualquier función se puede agregar a un objeto como una propiedad del objeto a través de la herencia de funciones. No hay diferencia en la herencia de otras propiedades, incluido el "enmascaramiento de propiedades" anterior (esta situación es equivalente). a anulación de métodos en otros idiomas)

Al llamar a la función heredada, apunta al objeto actualmente heredado, no al objeto prototipo donde se encuentra la función.

[javascript]? ¿Mirando la llanura? ¿Copiar

var? oh? =?{

Respuesta:? 2.

Hombre:? Función(){

¿Regresión? Esto. ?1;

}

};

consola . log(o . m());? //Tres

//?¿Mientras hablas por teléfono? o.m? Cuando "esto" apunta a o.

var? ¿pag? =?objeto . create(o);

//?p es un objeto. [[Prototipo]] es o.

¿Asistente personal? =?12;? //?¿crear? ¿pag? Autoatributos a.

consola . log(p . m());? //13

//?¿Llamar? ¿tarde? ¿cuando? ¿Cuál es este "punto"? ¿pag?

//?¿Porque otra vez? ¿pag? ¿heredar? oh? ¿Qué pasa? ¿metro? Función

//?¿En este momento? Ahora mismo. Es decir. ¿pag? sus propias propiedades", a

En segundo lugar, utilice diferentes métodos para crear objetos y generar editores de cadenas de prototipos.

1. Cree objetos utilizando la sintaxis normal

【javascript 】? Copiar

var? =?{a:?1};//?oEste objeto hereda todas las propiedades anteriores a Object.prototype

//?Por lo tanto, puede usarse como esto?

//?hasOwnProperty? es una propiedad de Object.prototype

/ El prototipo de /?Object.prototype está vacío. o? - gt;? /p>

Respuesta? ["Yo",? "Wow"] // Las matrices se heredan de Array.prototype? ForEach y otros métodos se heredan de él)

//?La cadena de prototipos es la siguiente:

//? ¿Respuesta? - gt;? {

>

}

//? Las funciones se heredan de Function.prototype

//? (Uf,? Bind y otros métodos se heredan de él.):

Función.Prototipo? Objeto.Prototipo?

2. Usar constructor /p>

En JavaScript, un constructor es en realidad una función normal. esta función, se puede llamar constructor. 】? Copiar gráfico()? ?{

addVertex:? Función (5){

estos vértices .push (v);

}

};

var? =? new? graph();

// ?g es el objeto generado y sus atributos son 'vértice' y 'borde'.

//?Cuando se crea una instancia de g, g.[[Prototype]] apunta a Graph.prototype

3. Utilice Object.create para crear un objeto.

ECMAScript 5 introdujo un nuevo método Object.create(). Puede llamar a este método para crear un nuevo objeto. Se llama al prototipo de un nuevo objeto. ¿crear? Método, el primer parámetro pasado:

[javascript]? ¿Mirando la llanura? ¿Copiar

var? ¿respuesta? =?{a:? 1};?

//?¿Respuesta? - gt;? Objeto.¿Prototipo? - gt;? ¿Var vacía

? ¿b? =?objeto . crear(a);

//?b? - gt;? ¿respuesta? - gt;? Objeto.¿Prototipo? - gt;? ¿Consola vacía

. log(b . a);? //?1?(heredado)

var? ¿do? =?objeto . crear(b);

//?c? - gt;? ¿b? - gt;? ¿respuesta? - gt;? Objeto.¿Prototipo? - gt;? ¿Var vacía

? ¿d? =?objeto crear(nulo);

//?d? - gt;? ¿Consola vacía

. log(d . hasownproperty);? //?Indefinido,? Porque d no hereda Object.prototype.

4. ¿Uso? ¿clase? Palabras clave

¿ECMAScript6 introduce un nuevo conjunto de palabras clave para lograr? Clases Los desarrolladores que utilizan lenguajes basados ​​en clases estarán familiarizados con estas construcciones, pero son diferentes. JavaScript todavía se basa en prototipos. ¿Estas nuevas palabras clave incluyen? amable,? ¿Constructor estático? Extensión, ¿alguna más? Súper impresionante.

[javascript]? ¿Mirando la llanura? Copiar

"¿Uso? Estricto";

¿Clase? ¿Polígono? {

Constructor(alto,?ancho)? {

¿Esta altura? =?Alto;

¿Este.Ancho? =?ancho;

}

}

¿Clase? ¿Cuadrado? ¿extender? ¿Polígono? {

Constructor(longitud lateral)? {

Super(longitud del lado,? longitud del lado);

}

¿Obtener? área()? {

¿Volver? ¿Esta... altura? *?this .width;

}

¿Configuración? ¿Longitud lateral (nueva longitud)? {

¿Esta altura? =?Nueva longitud;

¿Este.Ancho? =?Nueva longitud;

}

}

var? ¿Cuadrado? =?¿Nuevo? Square (2);

5. Rendimiento

Encontrar atributos en la cadena del prototipo requiere mucho tiempo y tiene efectos secundarios en el rendimiento, lo cual es importante cuando los requisitos de rendimiento son altos. Además, intentar acceder a una propiedad que no existe atraviesa toda la cadena del prototipo. Al iterar sobre las propiedades de un objeto, se enumerará cada propiedad enumerable en la cadena del prototipo.

¿Es necesario detectar si las propiedades del objeto están definidas en sí mismo o en la cadena del prototipo? ¿Tiene propiedad propia? Método que se incluye en todos los objetos que heredan de Object.proptotype.

¿tiene propiedad propia? Es el único método en JavaScript que solo involucra las propiedades del objeto en sí y no atraviesa la cadena del prototipo.

Nota: ¿Solo juzgando si el valor es? ¿Indefinido? No basta con comprobar si una propiedad existe. Una propiedad puede existir pero su valor no está definido.

6. Mala práctica: extender el prototipo de un objeto nativo

¿Un error común es extender? Objeto.¿Prototipo? O el prototipo de otros objetos integrados. Esta técnica, llamada parche de mono, rompe la tensión de la cadena del prototipo. Aunque algunos marcos populares (como Prototype.js) utilizan esta técnica, no hay una buena razón para confundir el sistema de tipos integrado con otros métodos no estándar. La única razón por la que ampliamos el prototipo de objeto integrado es para introducir algunas características nuevas del nuevo motor JavaScript, como Array.forEach.

cript type="text/javascript" src="/style/tongji.js">