What is a prototype

In JS, every function has a special property called prototype. This property is actually a pointer to an object. Only functions have this property.

What is a prototype chain?

Almost all objects in Js are instances of Object. Js is known as a prototype-based language. Every Object has a prototype Object, which is used as a template to inherit properties and methods from the prototype. A stereotype object also has its own stereotype from which it inherits properties and methods, and so on. This relationship is called a stereotype chain. This is why one object can have properties and methods defined in other objects. These properties and methods are defined in the Prototype property on top of the Object constructor function, not in the Object instance itself.

In the traditional object-oriented programming, is to rely on the class to achieve inheritance, first define a class, and then create an instance for the class, the class attributes and methods copy to the instance, but JS is not directly copied, Js creates a connection between an object instance and its constructor (the _proto_ property is derived from the constructor’s prototype property), and then finds properties and methods in the constructor by tracing the prototype chain back up.

    function Person() {
        this.name='zs';
        this.age='23';
    }
    let p1 = new Person();

Copy the code

P1.__ proto __ attribute (Person. Prototype) : when accessing an attribute or method of p1, the browser will first check p1 for the attribute. If p1 does not have the attribute, the browser will check p1 for the attribute. P1.__ proto__.__ proto__. By default, __proto__ for the prototype attribute of all functions is Object.prototype. __proto__ is searched until p1.__ proto__. __proto__. Finally, all __proto__ on the prototype chain is searched, and undefined is returned if this attribute is not found

For example, what happens when we call the p1.valueof () method?

  1. First check p1 object for valueOf
  2. If not, it checks for valueOf methods in p1’s prototype object (p1.__ proto __), the prototype object indicated by the constructor’s prototype property (Person.prototype)
  3. If not, the constructor’s prototype Object is then checked to see if the prototype Object (the Object to which the prototype property of the Object constructor points) has the method. There is a method, so it is called

When a function is created, it adds only a constructor property to its prototype object; the rest of the properties are inherited from the objec.prototype property.

      function Person(){}
      Person.prototype.name='Nicholas';
      Person.prototype.age=29;
      Person.prototype.job='Software Enngineer';
      Person.prototype.sayName=function(){}
Copy the code

The diagram below shows the relationship between the instance and the prototype in different cases, omitting the relationship with the Person constructor

Note that this breaks the correspondence between instance and prototype

    function Person() {}
    Person.prototype={
        name: 'Nicholas'.age:29.job:'Software Enngineer'.sayName:function() {
            console.log(this.name); }};Copy the code

In the code above, the prototype object for Person is equal to a new object created as a literal. The problem, however, is that as we mentioned earlier, every time a function is created, its Prototype object is also created, which automatically gets a constructor property, and in our syntax completely overrides the default Prototype object, so, The constructor property becomes the constructor property of the new Object (pointing to the Object constructor) instead of pointing to the Person constructor. At this point, although the instanceof operator still returns the correct result, there is no way to determine the type of the object from the constructor property, as shown below. Instanceof is used to test whether an object is an instanceof a constructor

    let person1 =new Person();
    console.log(person1 instanceof Person); // true
    console.log(person1 instanceof Object); // true
    console.log(person1.constructor === Person); // false
    console.log(person1.constructor === Object); // true
Copy the code
The instanceof operator is used to check whether the constructor’s prototype property appears on the prototype chain of an instance object.

As you can see, testing Object and Person with the instanceof operator still returns true, but the constructor property is Object instead of Person. We can specify the value of the constructor property as follows

    function Person() {}
    Person.prototype={
        constructor: Person,
        name: 'Nicholas'.age:29.job:'Software Enngineer'.sayName:function() {
            console.log(this.name); }};let person1 =new Person();
    console.log(person1 instanceof Person); // true
    console.log(person1 instanceof Object); // true
    console.log(person1.constructor === Person); // true
    console.log(person1.constructor === Object); // false
Copy the code