What is prototype chain in js

Each constructor has a prototype object. The prototype object contains a pointer to the constructor, and the instance contains a pointer to the inside of the prototype object. We make the instance of the prototype object (1) equal to another prototype object (2),

At this time the prototype object (2) will contain a pointer to the prototype object (1),

Then Let the instance of the prototype object (2) be equal to the prototype object (3). This layer-by-layer progression forms a chain of instances and prototypes. This is the concept of the prototype chain

Prototype chain

Each constructor has a prototype object, and each constructor instance contains an internal pointer (proto) pointing to the prototype object. If we let the first constructor The prototype object is equal to the instance of the second constructor, so the prototype object of the first constructor will contain a pointer to the second prototype object, and the third prototype object is equal to the instance of the first constructor, so that the prototype object of the first constructor will contain a pointer to the second prototype object. The three prototype objects will also contain pointers to the first prototype object, and so on, which is enough to form a chain of instances in the prototype. This is the basic concept of the prototype chain

function One(){
 }
 function Two(){
 }
 function Three(){
 }
 Two.prototype=new One();
 Three.prototype=new Two();
 var three=new Three();
 console.log(three);
 console.log(three.__proto__===Three.prototype) //true
 console.log(three.__proto__.__proto__===Two.prototype) //true
 console.log(three.__proto__.__proto__.__proto__===One.prototype)  //true
 console.log(three.__proto__.__proto__.__proto__.__proto__===Object.prototype)  //true

In object instances , the method of accessing the object prototype

1. Use the proto attribute

This attribute is an attribute supported by the browser, not an attribute in ECMAScript

2 .Object.getPrototypeOf

3. Use the method of constructor.prototype

For browsers that do not support proto, you can use constructor to access the object's constructor, and then use prototype to access the prototype

Use the prototype chain to explain the ANUGLAR scope

During the development process, we may have controller nesting, look at the following code:

  <div ng-controller="OuterCtrl">
        <span>{{a}}</span>
         <div ng-controller="InnerCtrl">
            <span>{{a}}</span>
         </div>
     </div>
    <script>
    function OuterCtrl($scope) {
    $scope.a = 1;
    }
    function InnerCtrl($scope) {
    }
    </script>

We can see The interface displays two 1's, and we only defined the a variable in the scope of OuterCtrl, but the result given to us by the interface is that both a's have values. Now a in the self-controller is inherited from the parent controller. Over here

We can think of the parent-child scope as two prototype objects, one of which inherits the instance of the other prototype object

The above is the detailed content of What is prototype chain in js. For more information, please follow other related articles on the PHP Chinese website!