Constructor - prototype - object prototype - constructor property - prototype inheritance - prototype chain

1. Constructor

Facing the characteristics of object programming, such as encapsulation and inheritance, can be realized with the help of constructors, but there will be a waste of memory

 <script>
    // Constructor function names usually start with uppercase letters
    // Instance object pointed to by this
    function Person(x, y) {
       this.uname = x,
       this.age = y,
       this.sing = function() {
         console.log('I can sing');
       }
    }
    // obj is an instance object, which obtains all the logic encapsulated in the constructor
    const obj = new Person('Zhang San', 20)
    console.log(obj); //Person {uname: 'Zhang San', age: 20, sing: ƒ}
    const obj2 = new Person('Li Si', 25)
    console.log(obj.sing === obj2.sing) //false instance objects are independent of each other and do not affect each other
  </script>

2. prototype

Each constructor has a prototype attribute that points to another object, which is also called a prototype object. This object can mount functions. We can directly define those Invariant Methods on the prototype object, so that all object instances can share these methods

<script>
    function Person(x, y) {
       this.uname = x,
       this.age = y
    }
    // Writing public methods to prototype objects saves memory
    Person.prototype.sing = function() {
      console.log('I can sing');
    }
    const obj  = new Person('Zhang San', 20)
    const obj2 = new Person('Li Si', 25)
    obj.sing()
    obj2.sing()
    console.log(obj.sing === obj2.sing) //true indicates that the function of sing is the same and shared
  </script>

3. constructor property

Each prototype object has a constructor attribute, which points to the constructor of the prototype object;

If there are methods of multiple objects, we can assign values to the prototype object in the form of objects, but this will overwrite the original content of the constructor prototype object, so that the constructor property of the modified prototype object will no longer point to the current constructor. At this time, we can add a constructor to the modified prototype object to point to the original constructor

 <script>
    function Person() {
    }
    Person.prototype = {
      // constructor: Person,
      sing: function () {
        console.log('I can sing')
      }
    }
    console.log(Person.prototype.constructor === Person) //false


      
    function Person() {
    }
    Person.prototype = {
      // After adding the pointing, the output result is true
      constructor: Person,
      sing: function () {
        console.log('I can sing')
      }
    }
    console.log(Person.prototype.constructor === Person) //true
  </script>

4. Object prototype__ proto__

1. Every object has an attribute__ proto__ The prototype object that points to the constructor. The reason why our object can use the properties and methods of the constructor prototype is that the object has__ proto__ Existence of prototype

 2,__ proto__ There is also a constructor attribute in the object prototype, which points to the constructor that creates the instance object

 

5. Prototype inheritance

<script>
    // Attributes and methods of human public
    function Person() {
      this.eyes = 2,
      this.head = 1
    }

    // man
    function Man() {
    }
    // Replace the original fixed object with new Person()
    Man.prototype = new Person()
    // Let the constructor point back to the original constructor
    Man.prototype.constructor = Man
    // Get the instance object of the constructor Man()
    const obj = new Man()
    // Adding the smoking method to Man's prototype
    Man.prototype.smoking = function(){
      console.log('smoking')
    }
    console.log(obj) //The smoking function is added to the man's print result


    // woman
    function Woman() {
    }
    // Replace the original fixed object with new Person()
    Woman.prototype = new Person()
    Woman.prototype.constructor = Woman
    const obj2 = new Woman()
    console.log(obj2) //There is no smoking function in women's print results
    
    console.log(Man.prototype === Woman.prototype) //false
  </script>

6. Prototype chain

Based on the inheritance of prototype objects, the prototype objects of different constructors are associated together, and the relationship of this association is a chain deconstruction. We turn the chain structure relationship of prototype objects into prototype chain

 

Prototype chain lookup rules:

1. When accessing the properties (including methods) of an object, first find out whether the object itself has the property;

2. If not, find its prototype (that is, the prototype object pointed to by _proto _)

3. If not, find the prototype of the prototype Object (the prototype Object of the Object)

4. And so on until the Object is found (null)

5,__ proto__ The significance of object prototype is to provide a direction, or a line, for the object member search mechanism

Tags: Javascript Vue.js programming language

Posted by richblend on Sun, 22 May 2022 02:42:35 +0300