Un artículo para que pueda entender por completo la cadena de prototipo de JS

prefacio

JavaScript es un prototipo más difícil de entender el concepto del prototipo será más propiedades relacionadas, un sujeto "[[Prototype]]" atributo, el objeto de función tiene atributo "prototipo", el objeto prototipo tiene la propiedad "constructor".

prototipo de comprensión (lo que es el prototipo)

Antes de comenzar el prototipo de introducción, primero hablamos de lo que es un prototipo?

definiciones

En JavaScript, es un prototipo objeto, los atributos hereda prototipo del objeto se puede lograr por, objetos JavaScript se incluyen en un "[[prototipo]]" propiedad interna, que se corresponde al objeto prototipo. "[[Prototype]]" como las propiedades internas del objeto no se puede acceder directamente. Todo para facilitar la visualización de un prototipo de objeto, cromo y otros proveedores principales navegadores ofrecen "__proto__" Esta visita no es estándar (ECMA prototipo objeto estándar de acceso introdujo "Object.getPrototype (Objeto)")

Estudio de caso

    function Animal(name, type) {
        this.name = name;
        this.type = type;
        this.getInfo = function(){
            console.info("当前动物属性==>",this.name   'is'   this.type)
        }
    }
    let dog = new Animal("狗", "犬科哺乳动物") // 当前动物属性==> 狗is犬科哺乳动物

Paso -> 1: Vista del perro objeto prototipo

    console.info("__proto__",dog.__proto__);
    // __proto__ Objectconstructor: ƒ Animal(name, type)__proto__:
    console.info("constructor=====>",dog.constructor)
     //constructor=====> ƒ Animal(name, type) {
     //       this.name = name;
     //       this.type = type;
     //       this.getInfo = function(){
    //      console.info("当前动物属性==>",this.name   'is'       this.type)

resultado del análisis

"Animal {}" objeto perro es el prototipo, el despliegue puede ser visto por Chrome, "Animal {}" como un objeto prototipo, hay " proto " atributo (que corresponde al prototipo prototipo)
En este código, también se utiliza la propiedad "constructor". En el objeto prototipo de objetos de JavaScript. También contiene un atributo "constructor", el punto correspondiente a crear todas las instancias del constructor prototipo

    // 拓展 可以判断一个对象是不是数组类型
    function isArray(arr){
        return arr.constructor.toString().indexOf("Array") > -1;
    }

* A continuación, propio objeto de perro no es "constructor" de esta propiedad, pero vistazo a través de la cadena de prototipo, que es el prototipo del perro (perro .__ proto__) de la propiedad "constructor", y encontró la función Animal

Paso -> 2: Subventanas perro prototipo (perro. Proto prototipo) de

Desde prototipo del perro "Animal {}" es un objeto, entonces también pueden ver el perro prototipo (. Perro Proto ) prototipo

    console.info(dog.__proto__ === Animal.prototype)
    console.info(Animal.prototype.__proto__)
    console.info(Animal.prototype.constructor)
    console.info(Animal.prototype.constructor === Animal)

resultado del análisis

Primer vistazo "Perro. Proto === Animal.prototype", en JavaScript, cada función tiene una propiedad prototipo, cuando se utiliza una función para crear un constructor de instancias, valor de la propiedad prototipo de la función será como un prototipo asignada a todas las instancias de objeto (es decir, para establecer un ejemplo de proto propiedad), es decir, el prototipo de todas las instancias citada es la propiedad función prototipo. Aprender la propiedad prototype del constructor después. Algunos se entiende por qué la primera frase es verdadera
Cuando por "Animal.prototype. Proto declaración" para obtener el objeto perro tiempo prototipo prototipo, obtendrá "Object {}" objeto se verá más tarde el prototipo de todos los objetos se remonta a la "Object {}" objeto.
Para el objeto prototipo "constructor" "" objeto Animal.prototype de la descripción anterior, Animal propia función correspondiente.

Se puede ver de lo anterior, los objetos y "Animal.prototype" Animal implementos de cada objeto que hace referencia la función "constructor" y "prototipo" Propiedades

Paso -> 3: Ver el objeto prototipo de objetos

Puede ser visto a través de la parte delantera, el prototipo es un prototipo "Object {}" del objeto. De hecho, en JavaScript, el prototipo de todos los objetos se remonta a la "Object {}" objeto. Vamos a ver "Object {}" del objeto mediante un código:

    console.log(Animal.prototype.__proto__ === Object.prototype);
    console.log(typeof Object);
    console.log(Object);
    console.log(Object.prototype);
    console.log(Object.prototype.__proto__);
    console.log(Object.prototype.constructor);

resultado del análisis

objeto objeto en sí mismo es un objeto de función.
Puesto que es la función del objeto, sin duda será la propiedad prototipo, para que pueda ver el valor "Object.prototype" es "Object {}" del objeto prototipo.
Por el contrario, cuando la visita "Object.prototype" objeto "constructor" de esta propiedad, se obtiene la función Obejct.
Además, cuando el a través de "Object.prototype. Proto Obtener objeto prototipo Prototipo de" tiempo será "nulo", que es objeto "Object {}" prototipo prototipo es el final de la cadena.

Paso -> 4: Comprobar el prototipo objeto Function

En el ejemplo anterior, los animales es una función constructora en JavaScript es un objeto, por lo tanto, podemos también " proto para encontrar la función prototipo objeto de Animales" atributo.

    console.log(Animal.__proto__ === Function.prototype);
    console.log(Animal.constructor === Function)
    console.log(typeof Function);
    console.log(Function);
    console.log(Function.prototype);
    console.log(Function.prototype.__proto__);
    console.log(Function.prototype.constructor);

resultado del análisis

Hay una función en objetos JavaScript (objeto similar), el objeto en sí es una función; prototipos para todas las funciones (incluyendo la función, de objetos) de ( proto ) son "Function.prototype".
objeto de función en función, no será un atributo que corresponde al prototipo de "function () {}" del objeto.
objeto de función como un objeto, hay " proto atributo", que corresponde a "Function.prototype", es decir, "la función. Proto === Function.prototype"
Para la función prototipo de objeto "Function.prototype", "objeto prototipo proto " atributo correspondiente a "Object {}"

prototipo de contraste y proto

Para el "prototipo" y " proto " Estas dos propiedades se pueden confundir a veces, "Person.prototype" y "la persona. Proto " es completamente diferente.

Aquí en el "prototipo" y " proto " una breve introducción:

Para todos los objetos son proto atributo que debería ser el prototipo de un objeto
Para los objetos de función, además proto Además de las propiedades, así como la propiedad prototipo, cuando se usa una función para crear un constructor ejemplo, valor de la propiedad prototipo de la función que se le asigna como un prototipo para todas las instancias de objeto (es decir, ejemplos de ajuste de proto propiedades)

cadena de prototipo

Para la figura resumirse como sigue:

Todos los objetos tienen " proto atributo", que debería ser el prototipo de un objeto
Todos los objetos tienen una función de propiedad "prototipo", se le asignará el valor de la propiedad a un objeto Esta función crea el " proto propiedad"
Todo objeto prototipo tiene atributo "constructor", que crea todos los puntos correspondientes de la instancia prototipo constructor
objetos prototipo de la función y objetos asociados entre sí a través del "prototipo" y "constructor" Propiedades
Puesto que cada objeto tiene un prototipo y el prototipo, el prototipo de los padres del objeto puntiagudo, y el padre del prototipo y punto a la matriz de la matriz, las capas de conexión prototipo constituir la cadena de prototipo.

hasOwnProperty

"HasOwnProperty" un método "Object.prototype", el método puede determinar si el objeto contiene una propiedad personalizada en la propiedad en lugar de la cadena de prototipos, porque "hasOwnProperty" JavaScript es la única propiedad, pero no encuentra una cadena de prototipo de la función de procesamiento .

Creo que recuerda el comienzo del ejemplo de artículo, se puede acceder a través del perro "constructor" de esta propiedad y conseguir que el perro constructores animal. Combinado aquí "hasOwnProperty" esta función se puede ver, objeto perro y no "constructor" de esta propiedad.

Se puede ver en la siguiente salida, "constructor" es el perro prototipo (perro. Proto ) Propiedad, sino por la búsqueda de la cadena de prototipo, perro, y el objeto se puede encontrar mediante la propiedad "constructor".

"HasOwnProperty" Otro escenario de uso importante, se utiliza para atravesar las propiedades del objeto.

function Person(name, age){
    this.name = name;
    this.age = age;
}

Person.prototype.getInfo = function(){
    console.log(this.name   " is "   this.age   " years old");
};


var will = new Person("Will", 28);

for(var attr in will){
    console.log(attr);
}
// name
// age
// getInfo

for(var attr in will){
    if(will.hasOwnProperty(attr)){
        console.log(attr);
    }
}
// name
// age

resumen

En este trabajo se introduce el concepto de prototipos de JavaScript relacionados con el prototipo puede resumir algunos de los siguientes puntos:

Todos los objetos tienen "[[Prototype]]" atributo (acceso por __proto__), correspondiente a los objetos objeto de atributo prototipo han todas las funciones "prototipo" valor de atributo de este atributo está asignado a la función creada "objeto proto " objeto prototipo tiene todas las propiedades atributo "constructor", que corresponde a la constructor crea todos los objetos apuntan a la instancia de objeto y el prototipo del prototipo se asocia con unos de otros por "el prototipo" y "constructor" describe estas propiedades , creo que podemos tener una comprensión clara del prototipo. imagen