Ten minutes to give you an in-depth understanding of JavaScript prototypes and prototype chains

Prototypes and prototype chains are difficult and key points in js. Understanding prototypes and prototype chains will make us more efficient in studying and working later, and prototypes and prototype chains will be important in interviews. An essential topic. After reading this article, you will definitely have a deep and comprehensive understanding of prototypes and prototype chains. I hope it will be helpful to everyone.

一, function object

all reference types (functions, arrays, objects) all have __proto__ attributes (Implicit prototype)

                                                                                                                                                                                                                                                                               . Objects, when defining functions, were created

# Second, and the constructor

# first review the constructor

//创建构造函数
        function Word(words){
            this.words = words;
        }
        Word.prototype = {
            alert(){
                alert(this.words);
            }
        }
        //创建实例
        var w = new Word("hello world");
        w.print = function(){
            console.log(this.words);
            console.log(this);  //Person对象
        }
        w.print();  //hello world
        w.alert();  //hello world

PRINT () method method, so w.print() prints hello world; alert() does not belong to the w instance method, but belongs to the constructor method. w.alert() will also print hello world because the instance inherits the constructor method.

# stealth prototypes of the instance W point to the explicit prototype of its constructive function, and it means that Heng is equal to

#

         w.__proto__ === Word.prototype

## When calling a certain method or finding When a certain attribute is found, it will first call and search itself. If it does not have the attribute or method, it will call the search in its __proto__ attribute, that is, the search will be called in the prototype of its constructor. So it is easy to understand the methods and properties of the instance inheritance constructor:

w itself does not have an alert() method, so it will call alert() in the explicit prototype of Word(), which is the method of the instance inheritance constructor. . 3. Prototype and prototype chain

        Function.prototype.a = "a";
        Object.prototype.b = "b";
        function Person(){}
        console.log(Person);    //function Person()
        let p = new Person();
        console.log(p);         //Person {} 对象
        console.log(p.a);       //undefined
        console.log(p.b);       //b

Think about it, the print result of p.a is undefined, and the result of p.b is b

Analysis:

p is Person() The instance is a Person object. It has a attribute value __proto__, and __proto__ is an object that contains two attribute values ​​Constructor and __proto __

        console.log(p.__proto__.constructor);   //function Person(){}
        console.log(p.__proto__.__proto__);     //对象{}，拥有很多属性值

We will find P .__ Proto __. Constructionor return The result is the constructor itself, p.__proto__.__proto__ has many parameters

## We call the constructor attribute, p.___proto__.__proto__.constructor gets multiple parameters Object() function, the constructor of the implicit prototype of Person.prototype points to Object(), that is,

Person.prototype.__proto__.constructor == Object()

The result returned from p.__proto__.constructor is the constructor itself. Person.prototype.constructor == Person() so p.___proto__.__proto__== Object.prototype

So the p.b print result is b, p does not have a b attribute, it will always search upward through __proto__, and finally find it when Object.prototype is found, and finally print out b. During the upward search process, we get Object.prototype instead of Function.prototype. Find The a attribute is not found, so the result is undefined. This is the prototype chain. It searches upward through __proto__ and finally ends at null.

        console.log(p.__proto__.__proto__.__proto__);   //null
        console.log(Object.prototype.__proto__);        //null

                                                              because everyone understands the process just now, I believe the following should also be understood

        //Function
        function Function(){}
        console.log(Function);  //Function()
        console.log(Function.prototype.constructor);    //Function()
        console.log(Function.prototype.__proto__);      //Object.prototype
        console.log(Function.prototype.__proto__.__proto__);    //NULL
        console.log(Function.prototype.__proto__.constructor);  //Object()
        console.log(Function.prototype.__proto__ === Object.prototype); //true

Summary:

1. Find the attribute. If there is no itself, you will go to __proto__ to find, that is, the displaying prototype of the constructor. If there is no such attribute in the constructor, because the constructor is also an object, there are __proto___________________________________________________________________________________________________________________________________________________________________________________________________________________________ , then it will search in its explicit prototype until null, if not, return undefined

  2.p.__proto__.constructor == function Person(){}

3. p.___proto__.__proto__== Object.prototype

            4.p.___proto__.__proto__.__proto__== Object.prototype.__proto__ == null                                                                                                        It is not Protropype

而 At last a picture. After reading it, you should be able to understand the picture after reading the picture. JavaScript learning tutorial

】

The above is the detailed content of Ten minutes to give you an in-depth understanding of JavaScript prototypes and prototype chains. For more information, please follow other related articles on the PHP Chinese website!