Explicación detallada de la cadena de prototipos js.

Este artículo ha participado en el evento "Ceremonia de creación de recién llegados" para comenzar juntos el camino de la creación de oro.

prefacio

La cadena de prototipos siempre ha sido una pregunta común en las entrevistas de js, y también es un conocimiento básico muy básico de js. Tal vez no se use con frecuencia, pero comprenderlo profundizará en gran medida su comprensión del lenguaje. Este artículo presenta la cadena de prototipos de una manera muy fácil de entender, léelo con paciencia, creo que te podrá ayudar.

Constructores e instancias

Supongamos que declara un método llamado Foo(), entonces podemos declarar la instancia con new Foo().

    function Foo() {
      console.log("我是一个构造方法");
    }
    const f1 = new Foo();
复制代码

Ahora puedes entender claramente que Foo() es 构造函数y f1 es su 实例.

Prototipo de propiedad

El constructor Foo() es un método.

Un método también es un tipo de datos de objeto, por lo que se puede decir que un método es un objeto.

Los objetos tienen atributos, pero 方法tienen su propio atributo especial, llamado prototype, otros objetos no.

Esta propiedad apuntará a one 原型对象(Foo.prototype), y el objeto prototipo también tendrá su propia propiedad llamada constructor, y la propiedad que apunta contiene un puntero que apunta al constructor original.

    function Foo() {
      console.log("我是一个构造方法");
    }
    const f1 = new Foo();

    console.log(Foo.prototype);//Foo的原型对象
    console.log(f1.prototype);//f1没有 underfied
复制代码

propiedad __proto__

El prototipo anterior es para 构造函数的所有实例proporcionar métodos y propiedades compartidas.

¿Cómo acceden las instancias a los métodos y propiedades compartidos?

La instancia f1 no tiene un prototipo, pero tiene un atributo __proto__, que es un atributo que tienen todos los objetos, y apunta a 构造自己的构造函数, 原型对象y luego el lenguaje js permite que la instancia acceda a atributos y métodos compartidos basados ​​en este atributo.

Foo es el constructor de f1, Foo.prototype es el objeto prototipo de Foo, por lo que f1.__proto__ apunta a Foo.prototype

    function Foo() {
      console.log("我是一个构造方法");
    }

    const f1 = new Foo();

    console.log(Foo.prototype);
    console.log(f1.__proto__);
复制代码

métodos de acceso en el prototipo

Si el constructor de Foo quiere que su propia instancia tenga la misma propiedad, como el nombre, agréguela a su propio objeto prototipo.

    function Foo() {
      console.log("我是一个方法");
    }

    Foo.prototype.name = "我是Foo创造的实例共享的属性";

    const f1 = new Foo();
    const f2 = new Foo();

    console.log(f1.name);//我是Foo创造的实例共享的属性
    console.log(f2.name);//我是Foo创造的实例共享的属性
复制代码

Breve resumen de lo anterior

sequenceDiagram
实例f1 ->> 构造函数Foo: 通过new的形式创造
构造函数Foo->>构造函数的原型对象Foo.prototype: prototype
构造函数的原型对象Foo.prototype->>构造函数Foo: constructor
实例f1->>构造函数的原型对象Foo.prototype: __proto__

Los constructores también tienen __proto__

Se dice que todos los objetos tienen __proto__, y Foo es una función y un objeto, entonces, ¿qué es Foo.__proto__?

那就去找Foo的构造函数是谁呢，Foo是一个函数，拥有函数特有的方法和属性，创造的它的构造函数就是Function，这个js自带的的一个构造函数，它的Function.prototype给所有js中你创建的函数提供函数自带的一些公共方法和属性。

所以Foo.__proto__指向Funtion.prototype

构造函数的原型也有__proto__

Foo.prototype也是对象，所以它也有__proto__。

每当我们要找__proto__，就得找它的构造函数，Foo.prototype是个对象，纯对象，所以它的构造函数是Object，那么Object的原型就是Object.prototype。

Foo.prototype.__proto__指向Object.prototype

Object.prototype这个原型对象很特殊

Array、String、Funtion、Object这些构造函数都是函数，都是Funtion构造函数的实例。 Array.__proto__、String.__proto__、Funtion.__proto__、Object.__proto__指向Funtion.prototype原型， 可以调用Funtion.prototype原型的一些公共方法， 例如都可以调用.name查看自己的函数名字。

Array.prototype、String.prototype、Funtion.prototype这些原型对象都是对象，都是Object构造函数的实例。 Array.prototype.__proto__、String.prototype.__proto__、Funtion.prototype.__proto__指向Object.prototype原型， 所以可以调用Object.prototype这个原型对象的公共方法，

而Object.prototype有些特殊，它虽然是对象，但是并不是Object自己的实例， Object.prototype.__proto__指向null，作为原型链的终点

总结

1. 方法，也就是函数，才有prototype，就是方法的原型。
2. 所以实例，一般都会有个对应的构造方法，也就是构造函数，实例的__proto__指向构造方法的原型。
3. js有很多自带的构造方法，例如Array、String、Funtion、Object，都是根据js一些对象类型分配的，他们的原型上提供了许多封装好的常用方法。
4. 所有构造方法本身是函数，是Funtion这个js自带构造函数的实例。
5. 除了Object.prototype，所有构造方法的原型本身是对象，是Object这个js自带构造函数的实例。
6. Object.prototype.__prototype指向null，作为原型链重点。

尾言

如果哪里让你有什么意见建议，请提出，我会即使反馈的，谢谢。