JavaScript Prototypes

There are countless introductions about prototypes and prototype chains on the Internet, but few can explain these two concepts clearly. Most of them introduce how to refer to various objects and attributes. The final result is that arrows are flying all over the sky and the brain is messed up. . This article will start with the naming of these two concepts, using plain and easy-to-understand language to help you understand exactly where these two things are.

1. Background knowledge

JavaScript is different from traditional object-oriented programming languages ​​such as Java and C++. It has no concept of classes (classes in ES6 are just syntactic sugar, not real classes). In JavaScript, everything All are objects. In class-based traditional object-oriented programming languages, objects are instantiated from classes. In the process of instantiation, class attributes and methods are copied to this object; object inheritance is actually class inheritance. When the subclass inherits from the parent class, the subclass will copy the properties and methods of the parent class to itself. Therefore, in this type of language, object creation and inheritance are all done through copying. But in JavaScript, object creation and object inheritance (better called object proxy, because it is not inheritance in the traditional sense) does not have copy behavior. Now let's forget about classes, forget about inheritance, none of this belongs to JavaScript.

2. Prototype and Prototype Chain

In fact, the name archetype itself is easy to misunderstand. The definition of archetype in Baidu entry is: refers to the original type or model. According to this definition, the prototype of an object is the model by which the object creates itself, and the object must have the characteristics of the model. This is just the concept of copying. We have already said that there is no copy in JavaScript's object creation, and the prototype of the object is actually an object, which is completely independent of the object itself. In that case, what is the significance of the existence of prototypes? Prototype is to share some common features (attributes or methods) between multiple objects. This feature is also a must-have for any object-oriented programming language. The prototypes of the two objects A and B are the same, so they must have some similar characteristics.

Objects in JavaScript have a built-in property [[Prototype]]that points to the prototype object of this object. When looking for a property or method, if the definition is not found in the current object, it will continue to search in the prototype object of the current object; if it is still not found in the prototype object, it will continue to search in the prototype object of the prototype object (the prototype is also an object , It also has its own prototype); and so on, until it is found, or the search is not found in the topmost prototype object, it ends the search and returns undefined. It can be seen that this search process is a chain search, each object has a link to its own prototype object, and the entire chain of these linked components is the prototype chain. The common characteristics of multiple objects with the same prototype are reflected in this search mode.

In the above search process, we mentioned that the top-level prototype object, the object is Object.prototype, the object is saved in the most commonly used methods, such as toString, valueOf, hasOwnPropertyand so on, so we can use these methods on any object.

In the above search process, we mentioned that the top-level prototype object, the object is Object.prototype, the object is saved in the most commonly used methods, such as toString, valueOf, hasOwnPropertyand so on, so we can use these methods on any object.

function object

    <script>

        // function object

        function person (fname, lname){

            this.firstName = fname,

            this.lastName = lname

        }

        var personOne = new person ("Elone","musk");

        var personTwo = new person ("bill","Gates");

        console.log(personOne);

        console.log(personTwo);

    </script>

function object with prototype

    <script>

        // function object with prototype

        function person (fname, lname){

            this.firstName = fname,

            this.lastName = lname

        }

        person.prototype.gender = "Male";

        var personOne = new person ("Elone","musk");

        var personTwo = new person ("bill","Gates");

        console.log(personOne);

        console.log(personTwo);

    </script>