Prototype chain knowledge has been a major examination of JS foundation, although in the work of development will not use a lot, but master this piece of knowledge, for the understanding of JS framework design, to help us read the source code has a great role. Especially during the interview stage, questions related to the prototype chain will be examined a lot. So understanding it thoroughly is an essential skill for every front-end programmer.

1. Concept of prototype chain

The picture at the beginning of this article is a graphical display of a prototype chain. Any function can be understood as a constructor. When we declare a function, the JS engine adds a prototype property to the function. The prototype property refers to the constructor’s prototype object. When we generate an instance of the constructor using the new operator, the instance object has a __proto__ attribute pointing to the prototype object of the constructor that generated the instance object. A prototype object is also an object that also has an internal __proto__ attribute pointing to the prototype object of the constructor that constructed the object, and so on…… Prototype chain. In fact, prototype chain is the link relationship of prototype objects linked by __proto__ attribute. When we access an object’s properties or methods, we first look inside the object. If not, we look in the object’s prototype object. If not, we look in the prototype object level by level, if there is, we go straight back, otherwise we look all the way to the top.

How’s that？ Don’t you think there’s anything sophisticated about the prototype chain. Create a map of the prototype chain in your head, and no matter what the interview question is, you’ll be able to handle it easily.

2. Several ways to create objects

Now that we understand what a prototype chain is, let’s add a few more ways to create objects to help solidify our understanding of prototype chains. Okay

  • Literal way:

This essentially generates an instance Object of the Object() constructor, which is the prototype Object of the Object constructor

    var obj = {
           name:"author"
       }
     New Object({name:"author"})
Copy the code
  • Created by constructor new

An instance object generated by the custom constructor new that points to the prototype object of the custom constructor

 function Buffer(){}
 var buffer = new Buffer()
Copy the code
  • Object. Create ()

Object. Create Creates an object based on the object passed in as a parameter. The prototype object of this object is the parameter object passed in

 var _prototype = {
        name:"author"
    }
 var obj = Object.create(_prototype)
Copy the code

3. newOperators andinstanceofThe principle of the operator

When we generate an instance object from a constructor using the new operator, we use the instanceof constructor, which returns true, and we use this method to determine whether the object was created by a constructor. So how do they work?

  • new
    
 function _new(fn){
     if(typeof fn === 'function') {var newObj = Object.create(fn.prototype);
        var res =  fn.call(newObj);
        if(typeofres ! = ='object' && typeofres ! = ='function') {return newObj
        }else{
            return res
        }
     }else{
         throw new Error('the arguments must be function')}}Copy the code
  • instanceof

Let’s start with an example of how Instanceof actually works:

 function Buffer(){}var buffer  = new Buffer(); 
 console.log(buffer instanceof Buffer) // true
 console.log(buffer instanceof Object) // true

Copy the code

Internally, buffer is instantiated using the __proto__ constructor based on whether the instance object’s __proto__ pointer matches the prototype pointer of the constructor. Therefore, it is understandable that the result of buffer instanceof buffer is true, but the result of buffer instanceof Object is also true. Therefore, we can conclude that the judgment rule must be more than one layer. After verification, Instanceof is a way to determine whether the stereotype objects in the entire stereotype chain are equal to the constructor’s stereotype objects.

function _insatnceof(obj,fn){
    var obj_proto = obj.__proto__;
    var target_proto = fn.prototype;
    while(obj_proto){
        if(obj_proto === target_proto){
            return true
        }
        obj_proto = obj_proto.__proto__;
    }
    return false
} 
Copy the code
In fact, prototype chain is conceptual knowledge, itself is not what difficulty, is a little round to understand. I hope this article can help those in need to clear their minds. There is no limit to learning, forge ahead!