Constructor
Escribí este contenido una vez antes, pero cuando llegué a revisar este conocimiento, sentí que la escritura no era buena, así que decidí escribirlo nuevamente para revisarlo. Pero lee varios artículos. Es que el estilo de cada uno es diferente. El punto de partida de los puntos de conocimiento no es el mismo. Así que creo que es fácil de mencionar.
Primer vistazo a cómo se crea el constructor.
function obj(name){
this.name = name;
}
obj.add = (x,y) =>{
return x+y
}
var Person = new obj('lly');
console.log(Person.name)
console.log(Person.name)
En el código anterior, obj es un constructor, que crea un objeto a través de new.
Hay otros dos puntos de conocimiento que necesitan ser entendidos. Miembro de instancia y miembro estático
Miembro de instancia : Es un atributo agregado a través de esto dentro del constructor, lo llamamos miembro de instancia. Solo se puede acceder a los miembros de la instancia creando objetos con new.
Miembro estático: es un atributo agregado externamente por el constructor, lo llamamos miembro estático; no se puede acceder a los miembros estáticos a través de new, pero se puede llamar directamente a través del constructor para ver el
código
function obj(name){
this.name = name; //实例成员
}
obj.age = 20; //静态成员
let o = new obj('cyd');
console.log(o.age) //undefind
console.log(o.name) // cyd
console.log(obj.name) //obj
console.log(obj.age) //20
Una cosa a la que debemos prestar atención aquí es que cuando el constructor accede directamente al miembro de la instancia, se devuelve el nombre del constructor. obj en el código anterior.
prototipo de javascript
Antes de comenzar, hablemos de algunos puntos clave. Recuerda que es conveniente entender
prototipo más adelante : esta propiedad que solo tienen las funciones se llama prototipo. La herencia posterior también lo requiere.
proto : habrá atributos en el objeto que apunten al prototipo, así como en la función, porque la función también es un objeto.
El constructor constructor, por qué se llama constructor, porque se puede usar para obtener el constructor
Arriba, recordemos brevemente estas palabras clave. Vamos a explicar en detalle a continuación.
prototipo
Veamos el siguiente código
function obj(name){
this.name = name;
}
obj.prototype.printName = function(x,y){
return x+y
}
var Person = new obj('lly');
console.log(obj.prototype)
//打印如下图
Mencioné que el prototipo es un prototipo, ¿por qué? Debido al prototipo al que apunta, lo que obtenemos a través de obj.prototype es el prototipo, y el prototipo se muestra mediante un objeto. Hay una oración obj.prototype.printName
en el código anterior , lo que significa agregar un método printName al prototipo, por lo que verá el método printName en el prototipo impreso a continuación . Entonces veamos que hay otros dos atributos en este prototipo. Constructor y __proto__ aquí, para corresponder al orden anterior, primero diga __proto__.
prototipo
Como dijimos anteriormente, será un atributo que tendrán todos los objetos. Cuando el objeto accede a esta propiedad, apunta al objeto prototipo y el código está en el segundo.
function obj(name){
this.name = name;
}
obj.prototype.printName = function(x,y){
return x+y
}
let o = new obj('cyd');
console.log(o.__proto__)
Es exactamente lo mismo, lo que confirma que __proto__ también apunta al objeto prototipo. Entonces puedes obtener un resultado.
console.log(o.__proto__ == obj.prototype) //true
constructor
Dijimos anteriormente que el constructor es un constructor. ¿por qué? Secundario en el código
function obj(name){
this.name = name;
}
obj.prototype.printName = function(x,y){
return x+y
}
let o = new obj('cyd');
console.log(o.__proto__.constructor)
console.log(obj.prototype.constructor)
//结果如下
Al ver esto, podemos entender por qué se llama constructor, porque podemos obtener su constructor obj usando el objeto prototipo para acceder al constructor . Entonces lo llamamos el constructor. tenemos otro resultado
console.log(o.__proto__.constructor == obj) //true
console.log(obj.prototype.constructor == obj) //true
Como dijimos anteriormente, las funciones también pueden acceder a __proto__. No tiene sentido acceder directamente a las funciones, por lo que no las discutiremos aquí.
cadena prototipo
Después de comprender el contenido anterior, es muy sencillo comprender la cadena de prototipos. Lo que podemos saber es que cada objeto tiene un __proto__, y nuestro prototipo también es un objeto, entonces, ¿hacia dónde apunta el __proto__ del objeto prototipo? Secundario en el código
function obj(name){
this.name = name;
}
obj.prototype.printName = function(x,y){
return x+y
}
let o = new obj('cyd');
console.log(o.__proto__.__proto__)
console.log(o.__proto__.__proto__.constructor)
Bueno, lo que se devuelve sigue siendo un objeto prototipo, y el constructor es Object (para explicar aquí, Object es el objeto prototipo fundamental, y todos los métodos de objeto a los que accedemos provienen de aquí, como object.create, Assign, etc. ) Es como si no hubiéramos creado este método, pero podemos acceder a él.
Veamos primero qué es el __proto__ del objeto prototipo de este Objeto .
console.log(o.__proto__.__proto__.__proto__) // null
nuloVacío. Resulta que Object es el jefe del prototipo. No hay uno más grande por encima de él. Entonces, cuando lo buscamos, solo puede ser nulo. Tal búsqueda capa por capa forma una cadena de prototipos.
mira la foto
Pequeño teatro:
en una familia de tres generaciones, Xiao Ming quería una manzana, por lo que se la pidió a su padre, pero su padre no la tenía, por lo que se la pidió al padre de su padre. Resultó que el padre de su padre tenía una, es decir, su abuelo tenía una manzana, así que se la dio.
Objeto otros puntos de conocimiento
Herencia
Como se mencionó anteriormente, el prototipo se puede utilizar para la herencia. Al final es cómo heredar eso. Secundario en el código
function obj(name){
this.name = name;
this.add = function(x,y){
return x+y
}
}
obj.prototype.product = function(x,y){
return x*y
}
function obj2(age,name){
obj.call(this,name);
this.age = age
}
let a = new obj('lly');
let b = new obj2(20,'cyd');
console.log(a.name) //lly
console.log(b.name) // cyd
console.log(b.add(5,5)) //10
console.log(b.product(2,5)) //Uncaught TypeError: b.product is not a function
En el código anterior, usamos call para implementar la herencia de los miembros de la instancia. Pero viendo el prototipo, no hay forma de heredar. ¿Cómo se puede heredar el objeto prototipo? Dijimos anteriormente que la herencia de prototipos la necesita, así que intentémoslo.
function obj(name){
this.name = name;
this.add = function(x,y){
return x+y
}
}
obj.prototype.product = function(x,y){
return x*y
}
function obj2(age,name){
obj.call(this,name);
this.age = age
}
obj2.prototype = Object.create(obj.prototype);
obj2.prototype.ls = function(x){
return x
}
let a = new obj('lly');
let b = new obj2(20,'cyd');
console.log(a.name) //lly
console.log(b.name) //cyd
console.log(b.add(5,5)) // 10
console.log(b.ls(3)) // 3
console.log(b.product(2,5)) //10
Simplemente agregue **obj2.prototype = obj.prototype;** para lograr la herencia del prototipo.
Habiendo dicho tanto, sigue siendo es5. Hablemos de es6.
ES6 introduce el concepto de clase. clase. Echemos un vistazo a cómo usarlo primero. Secundario en el código
class obj{
constructor(name){
this.name = name
}
add(x,y){
return x+y
}
}
let a = new obj('lly');
console.log(a.name) //lly
console.log(a.add(5,2)) // 7
Lo anterior es el uso básico de la clase. La clase debe usarse de una manera nueva. Todos los métodos de la clase se colocan en el prototipo.
Puedes imprimirlo y echar un vistazo.
class obj{
constructor(name){
this.name = name
}
add(x,y){
return x+y
}
}
let a = new obj('lly');
let b = new obj('cyd');
console.log(a.__proto__ == b.__proto__) //true
Class puede implementar la herencia a través de la palabra clave extends, que es mucho más clara y conveniente que la herencia de ES5 al modificar la cadena de prototipos.
lass obj{
constructor(name){
this.name = name
}
add(x,y){
return x+y
}
}
class obj2 extends obj{
}
let p = new obj2('cyd');
console.log(p.name) // cyd
Resumir
Siento no haber hecho un resumen, pero te lo dejo a ti.