An article so that you completely understand JS prototype chain

Foreword

JavaScript is a prototype more difficult to understand the concept of the prototype will be more related properties, a subject "[[prototype]]" attribute, the function object has "prototype" attribute, the prototype object has "constructor" property.

Understanding prototype (what is the prototype)

Before beginning the prototype of introduction, we first talk about what is a prototype?

definition

In JavaScript, is an object prototype, the prototype inherits attributes of the object can be achieved by, JavaScript objects are included in a "[[prototype]]" internal property, which is corresponding to the prototype object. "[[Prototype]]" as the internal properties of the object can not be accessed directly. All for easy viewing of an object prototype, Chrome and other major browser vendors offer "__proto__" This visit is non-standard (ECMA standard object prototype introduced accessor "Object.getPrototype (Object)")

Case Analysis

    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犬科哺乳动物

Step -> 1: View of the prototype object dog

    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)

Result analysis

• "Animal {}" dog object is the prototype, deployment can be seen by Chrome, "Animal {}" as a prototype object, there are " proto " attribute (corresponding to the prototype prototype)
• In this code, also used "constructor" property. In the Object prototype object of JavaScript. Also contains a "constructor" attribute, the point corresponding to create all instances of the prototype constructor

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

* Here, dog object itself is not "constructor" of this property, but look through the prototype chain, which is the prototype of the dog (dog .__ proto__) of "constructor" property, and found the Animal function

Step -> 2: View Objects prototype dog (dog. Proto prototype) of

Since the dog's prototype "Animal {}" is an object, then we can also view the prototype dog (dog. Proto ) prototype

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

Result analysis

• First look "Dog. Proto === Animal.prototype", in JavaScript, each function has a prototype property, when a function is used to create an instance constructor, prototype property value of the function will be as a prototype assigned to all object instances (that is, to set an example of proto property), that is, the prototype of all instances cited is the function prototype property. Learn the prototype property of the constructor after. Some will understand why the first sentence is true
• When by "Animal.prototype. Proto " statement to get dog object prototype prototype time, you will get "Object {}" object will be seen later the prototype of all objects are traced back to the "Object {}" object.
• For the prototype object "constructor" "Animal.prototype" object from the foregoing description, Animal corresponding function itself.

Can be seen from the above, "Animal.prototype" Animal objects and implements each function object referenced by the "constructor" and "prototype" Properties

Step -> 3: View the Object prototype object

Can be seen through the front part, the prototype is a prototype will "Object {}" Object. In fact, in JavaScript, the prototype of all objects are traced back to the "Object {}" object. Let's see "Object {}" Object by a code:

    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);

Result analysis

• Object object itself is a function object.
• Since it is Object function, it will certainly be the prototype property, so you can see the value "Object.prototype" is "Object {}" the prototype object.
• Conversely, when the visit "Object.prototype" object "constructor" of this property, you get Obejct function.
• Further, when the through "Object.prototype. Proto Get Object Prototype Prototype of" time will be "null", that is "Object {}" prototype prototype object is the end of the chain.

Step -> 4: Check the object Function prototype

In the above example, Animal is a constructor function in JavaScript is an object, therefore, we can also " proto to find the function prototype Animal object" attribute.

    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);

Result analysis

• There are a Function in JavaScript objects (similar Object), the object itself is a function; prototypes for all functions (including Function, Object) of ( proto ) are "Function.prototype".
• Function object as a function, there will be a prototype attribute corresponding to "function () {}" Object.
• Function object as an object, there are " proto " attribute, which corresponds to "Function.prototype", that is to say, "Function. Proto === Function.prototype"
• For Function prototype object "Function.prototype", "the prototype object proto " attribute corresponding to "Object {}"

Contrast prototype and proto

For the "prototype" and " proto " These two properties may sometimes be confused, "Person.prototype" and "the Person. Proto " is completely different.

Here on the "prototype" and " proto " a brief introduction:

• For all of the objects are proto attribute that should be the prototype of an object
• For the function objects, in addition proto addition to properties, as well as prototype property, when a function is used to create an instance constructor, prototype property value of the function to be assigned as a prototype for all object instances (i.e. setting examples of proto Attributes)

For the FIG summarized as follows:

• All objects have " proto " attribute, which should be the prototype of an object
• All objects have a function "prototype" property, the value of the property will be assigned to an object This function creates the " proto " property
• All prototype object has "constructor" attribute, which creates all the corresponding points of the prototype instance constructor
• Prototype function objects and objects associated with each other through the "prototype" and "constructor" Properties
• Since each object has a prototype and the prototype, the prototype of the pointed object's parent, and the parent of the prototype and point to the parent of the parent, the prototype connecting layers constitute the prototype chain.

hasOwnProperty

"HasOwnProperty" a method "Object.prototype", the method can determine whether the object contains a custom property on the property instead of the prototype chain, because "hasOwnProperty" JavaScript is the only property but does not find a processing function prototype chain .

I believe you remember the beginning of the article example, we can access through the dog "constructor" of this property and get the constructors Animal dog. Combined here "hasOwnProperty" this function you can see, dog object and not "constructor" of this property.

Can be seen from the following output, "constructor" is the prototype dog (dog. Proto ) property, but by finding the prototype chain, dog, and the object can be found using the "constructor" property.

"HasOwnProperty" Another important usage scenario, is used to traverse the object's properties.

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

to sum up

This paper introduces the concept in JavaScript prototypes related to the prototype can sum up some of the following points:

All objects have "[[prototype]]" attribute (access via __proto__), corresponding to the attribute object prototype objects have all functions "prototype" attribute value of this attribute is assigned to the function created "object proto " prototype object has all the properties "constructor" attribute, which corresponds to the constructor creates all objects point to the object instance and the prototype of the prototype is associated with each other by "the prototype" and "constructor" describes these properties , I believe we can have a clear understanding of the prototype.