contenido
1. Prototipo de prototipo de constructor
5. Esto en el objeto prototipo apunta a
6. Ampliación de objetos integrados (aplicación de objetos prototipo)
Antes de ES6, implementamos la orientación a objetos a través de constructores. Ponemos las propiedades y métodos públicos del objeto en el constructor.
Me gusta esto:
function student(uname,age) {
this.uname = uname;
this.age = age;
this.school = function() {
console.log('深圳理工大学');
}
}
var stu1 = new student('小红',18);
var stu2 = new student('小紫',20);Sin embargo, aunque el método constructor es fácil de usar, tiene el problema de desperdiciar memoria. Por ejemplo, en el ejemplo anterior, tenemos una función en el constructor. La función es un tipo de datos complejo y creará un espacio separado en la memoria. Aquí creamos dos objetos instanciados, luego se abrirán dos espacios de memoria para almacenar la misma función, lo que causará el problema del desperdicio de memoria.
1. Prototipo de prototipo de constructor
La función que el constructor asigna a través del prototipo es compartida por todos los objetos .
JavaScript estipula que cada constructor tiene una propiedad prototipo que apunta a otro objeto. Tenga en cuenta que este prototipo es un objeto, y todas las propiedades y métodos de este objeto serán propiedad del constructor.
Podemos definir esos métodos invariantes directamente en el objeto prototipo, de modo que todas las instancias de objetos puedan compartir estos métodos.
Entonces, en el ejemplo anterior, podemos poner la función pública en el objeto prototipo, para que no haya desperdicio de memoria.
function student(uname,age) {
this.uname = uname;
this.age = age;
}
student.prototype.school = function() {
console.log('深圳理工大学');
}
var stu1 = new student('小红',18);
var stu2 = new student('小紫',20);
Entonces entendemos qué es el prototipo, es un objeto, llamamos al prototipo el objeto prototipo.
¿Cuál es el papel del prototipo? Cuatro palabras, método de compartir
2. Objeto prototipo __proto__
El objeto tendrá un atributo __ proto__ que apunta al prototipo objeto prototipo del constructor.La razón por la cual nuestro objeto puede usar las propiedades y métodos del objeto prototipo prototipo del constructor es porque el objeto tiene el _ proto_ prototipo.
Sobre el objeto, el propio sistema añade un __proto__ apuntando al objeto prototipo de nuestro constructor, por lo que el prototipo del objeto __proto__ y el prototipo del objeto prototipo son equivalentes.
Verifiquemos y veamos qué se generará:
console.log(stu1.__proto__ === student.prototype);
El resultado final es verdadero para demostrar que el prototipo de objeto __proto__ y el prototipo de objeto prototipo son equivalentes
Por lo tanto, la regla de búsqueda de métodos es verificar primero si existe un método de escuela en el objeto stu1. Si lo hay, ejecute el método de escuela en este objeto. Si no hay un método de escuela, debido a la existencia de __proto__, vaya a el constructor prototipo objeto prototipo para encontrarlo escuela este método
Si aún no entiende, aquí hay una imagen para entender su pregunta:
3.constructor constructor
Objeto prototipo (__proto__) y constructor (prototipo) Hay una propiedad constructora en el objeto prototipo.El constructor se llama función constructora porque apunta a la función constructora misma.
Imprimamos student.prototype y stu1.__type__ para ver si existe la propiedad del constructor:
console.log(student.prototype);
console.log(stu1.__proto__);
Puede ver que hay constructores aquí, entonces, ¿qué hace el constructor?
El constructor se usa principalmente para registrar a qué constructor se refiere el objeto, puede hacer que el objeto prototipo vuelva a apuntar al constructor original
Sabemos que podemos definir esos métodos públicos en el objeto prototipo, pero si hay muchos métodos públicos, nos conviene mucho más almacenarlos en forma de objetos:
student.prototype = {
school:function() {},
location:function() {}
}Luego mostramos el constructor del objeto prototipo para ver si hay algún cambio:
console.log(student.prototype.constructor);
console.log(stu1.__proto__.constructor);
El resultado final es este:
¿Por qué es esto? ¿No debería el constructor señalar a nuestro estudiante constructor?
Porque estamos agregando métodos al objeto prototipo a través de estudiante.prototipo.escuela, pero solo asignamos tareas, lo que sobrescribe todo en el prototipo original, por lo que estudiante.prototipo no tiene constructor. Sin un constructor, naturalmente significa que no se puede volver atrás. al estudiante constructor
En este momento, necesitamos usar manualmente el atributo constructor para apuntar al constructor original.
student.prototype = {
constructor:student,
school:function() {},
location:function() {}
}Volvamos a generar el constructor del objeto prototipo:
De esta manera sabemos qué constructor creó el objeto.
Ahora actualicemos el diagrama de relaciones entre constructores, instancias y objetos prototipo:
4. Cadena prototipo
Debido a que el objeto prototipo del estudiante también es un objeto, dijimos anteriormente que mientras sea un objeto, hay un prototipo de objeto.
Luego imprimimos el objeto prototipo para ver si hay un prototipo en él:
function student(uname,age) {
this.uname = uname;
this.age = age;
}
student.prototype.school = function() {
console.log('深圳理工大学');
}
var stu1 = new student('小红',18);
console.log(student.prototype);Resultado de salida:
Se puede ver que también hay un prototipo en el objeto prototipo, y debido a que el prototipo apunta al objeto prototipo, ¿a quién apunta el __proto__ en nuestro alumno.prototipo?
imprimamos:
console.log(student.prototype.__proto__);Puede ver que el constructor apunta al objeto prototipo Object.
Quién creó el objeto prototipo de Object, sin duda creado por el constructor de Object. Así que continuemos, el objeto prototipo de objeto también es un objeto, por lo que también tiene un prototipo, ¿y a quién apunta este prototipo?
Vamos a dar salida:
console.log(Object.prototype.__proto__);El resultado final está vacío:
Esto nos lleva al nivel superior, por lo que podemos unirlos para obtener una cadena prototipo:
5. Esto en el objeto prototipo apunta a
Sabemos que esto en el constructor se refiere a la instancia del objeto, entonces en la función en el objeto prototipo, ¿a quién apunta esto en esta función?
Declaramos una variable global que, asignamos esto en el objeto prototipo a eso, y vemos si eso apunta a un objeto de instancia:
function student(uname,age) {
this.uname = uname;
this.age = age;
}
var that;
student.prototype.school = function() {
that = this;
console.log('深圳理工大学');
}
var stu1 = new student('小红',18);
stu1.school();
console.log(that === stu1);
Resultado de salida:
Así que esto en la función de objeto prototipo también apunta al objeto de instancia stu1
6. Ampliación de objetos integrados (aplicación de objetos prototipo)
Podemos ampliar y personalizar el objeto incorporado original a través del objeto prototipo. Por ejemplo, agregar una función de suma personalizada a una matriz
Vamos a generar el objeto prototipo de la matriz para ver qué métodos hay en él:
console.log(Array.prototype);
Aquí no hay una función de suma personalizada para la matriz, por lo que agregamos este método al objeto prototipo de la matriz:
Array.prototype.sum = function() {
var sum = 0;
for(var i = 0;i<this.length;i++)
{
sum += this[i];
}
return sum;
}
var ss = new Array(4,5,3,6);
console.log(ss.sum());En nuestro método de suma personalizado, this.length se refiere a la longitud de la matriz que llama a este método, porque en la sección anterior sabemos que this en la función de objeto prototipo también apunta al objeto de instancia
Creamos un objeto de instancia de matriz a través del nuevo método, agregamos el método de suma al objeto prototipo de la matriz, luego nuestro objeto de instancia puede llamarlo.
Resultado de salida:
Imprimamos el objeto prototipo de la matriz nuevamente para ver si hay un método de suma en él:
Se puede ver que sum se agrega con éxito al objeto prototipo de la matriz, de modo que cuando continuamos usando la suma de la matriz, podemos llamar directamente al método sum.