What are prototypes and prototype chains?

All objects have _proto_, but only function objects have prototype.

1. The prototype

① All reference types have a __proto__(implicit stereotype) attribute whose value is a generic object, constructor and __proto__. Constructor indicates which constructor the object was created by, such as test.constructor == test

② All functions have a prototype attribute whose value is a normal object

③ The __proto__ attribute of any reference type points to the prototype of its constructor, that is, the object’s __proto__ holds the prototype of that object

For example:

var a = [0.1.2];
a.__proto__ === Array.prototype; // true
Copy the code

2. The prototype chain

When accessing a property of an object, it looks first at the property itself. If not, it looks at its __proto__ implicit prototype, the constructor’s prototype. If not, it looks again at the constructor’s __proto__. And so you go up layer by layer and you create a chain, which we call a prototype chain.

For example:

         function People(age, name) {
            this.age = age
            this.name = name

        }
        const person1 = new People(24.'Flowing maple')
        console.log(person1.age); / / 24
        console.log(person1.name); // select * from *;
        console.log(person1.height); //undefined
        console.log(person1.__proto__ === People.prototype); //true confirms that the object's __proto__ holds the object's prototype.
Copy the code

Prototype: person1.proto === people. prototype

  function People(age, name) {
            this.age = age
            this.name = name

        }
        const person1 = new People(24.'Flowing maple')
        console.log(person1.__proto__ === People.prototype, ); //true, the object's __proto__ holds the object's prototype
        console.log(person1.__proto__); // First print
Copy the code

First print result:

Second print:

 function People(age, name) {
            this.age = age
            this.name = name

        }
        const person1 = new People(24.'Flowing maple')
        console.log(person1.__proto__ === People.prototype, ); //true, the object's __proto__ holds the object's prototype
        People.prototype.height = 180
        console.log(person1.__proto__); // Print the second time
        
Copy the code

Second printing result:

Person1.proto == people.prototype

When an element is found in person1, the following steps are performed:

The access link is:

Here’s an example:

  function Test() {
            this.a = 1
        }
        const test = new Test()
        console.log(test);
        Test.prototype.b = 2
        console.log(Test.prototype.__proto__ === Object.prototype); //true
        console.log(Object.prototype.__proto__); / / null, no __proto__ Object
        Object.prototype.c = 3 // Because test.prototype. __proto__ === object.prototype
        console.log('-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --');

        console.log(test.a);
        console.log(test.b);
        console.log(test.c);
Copy the code

Print result:

From here we can see that the attribute lookup is done layer by layer, which is also called prototype inheritance

(1) If null is not found, return undefined

(2) the Object. The prototype. The proto = = = null

(3) All methods obtained and executed from prototypes or higher, where this, when executed, refers to the object that triggered the event

3. Check whether the object has the property

Determine whether the property exists on the object itself (hasOwnProperty()) and on the prototype chain (property name in object)

 function Test() {
            this.a = 1
        }
        const test = new Test()
        Test.prototype.b = 2
        Object.prototype.c = 3

        // hasOwnProperty(), which determines whether the object itself contains this property
        console.log(test.hasOwnProperty('a')); //true
        console.log(test.hasOwnProperty('b')); //false
        console.log(test.hasOwnProperty('c')); //false

        console.log('-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --');
        // Attribute name in object to determine if the stereotype chain has this attribute
        console.log('a' in test);
        console.log('b' in test);
        console.log('c' in test);
Copy the code