Deep understanding of javascript object prototypes and constructors

Keywords: Javascript

Deep understanding of javascript object prototypes and constructors

Object creation process

When you call the F constructor with the new operator, you go through the following steps:
1. Create an empty object as the instance object to be returned
2. Point the prototype of the empty object to the prototype property of the constructor, that is, the prototype property of the F constructor.
3. Assign an empty object to this keyword inside the constructor, that is, this keyword will point to the instance object.
4. Start executing code inside the constructor.

var student  =function (age) {
      this.age =age;
 };
 var s = new student(15);
 console.log(s.__proto__===student.prototype);  //=>true

Class is inheritance

Simple inheritance:
Note: why to use student.prototype.constructor =student
Solution: as shown in the figure

The s instance constructor reference points to the person instantiating the student and the changes it should display so that it points to the student function

  var person = function (name,book) {
            this.name = name;
            this.book =book;
        };
       var student  =function (age,name,book) {
            this.age =age;
            person.call(this,name,book); //Change this direction
       };
       person.prototype.height = 175;
       student.prototype = new person();
        student.prototype.constructor =student;   //Make the constructor of s refer to student  
       var s = new student(18,'zl','js');
      console.log(s.constructor) ;
      console.log(student.prototype.constructor)
      console.log(s.name,s.age,s.book);

Encapsulate it

 /*
        * 
        * Class inheritance
        * 
        * */        
        function extend(subClass,superClass) {
            var f = function () {};
            f.prototype =superClass.prototype;
            subClass.prototype = new f();
            subClass.prototype.constructor = subClass;
            subClass.superclass =superClass.prototype;
            if(superClass.prototype.constructor==Object.prototype.constructor){
                superClass.prototype.constructor =superClass;
            }
        }
        function person(name,age) {
            this.name = name;
            this.age =age ;
        }
        function student(books,name,age) {
            student.superclass.constructor.call(this,name,age)
            this.books = books;
            this.getName = function () {
                console.log(this.books);
            }
        };
        extend(student,person);
        //test
        var s = new student('js','zs',9);
        s.getName();
        console.log(s.name,s.age);

Archetypal inheritance

  /*
      * Prototype inheritance: you don't need to use a class to define the structure of an object, you just need to create an object directly,
      * This object can be reused by new objects (using the working mechanism of prototype chain search)
      *
      *
      * Using the clone function
      * */

      function clone(obj) {
          function fun() {};
          fun.prototype = obj;
          return new fun;
      };


      var person = function (name) {
          this.name= name;
          this.age = 18;
      }

      var student = clone(new person('zs'));
        student.name = 'zl';
        student.age = 15;
      console.log(student.age,student.name);

      var student1 = clone(new person('zs'));
      console.log(student1.age,student1.name);

      //Because an object is passed, you can use the following methods

      var people = {
          name:'zs',
          age:18
      };
      var s = clone(people);
      console.log(s);
      s.name='zl';
      s.age=15;
      console.log(s.name,s.age);
      var s1 = clone(people);
      console.log(s1.name,s1.age);
      s.__proto__.age=15;
      s.__proto__.name='zl';
      console.log(s1.name,s1.age);

Illustration:

Posted by alkhatareykha on Sat, 21 Dec 2019 10:09:04 -0800