JavaScript -- Inheritance

js Inheritance in is the inheritance of the prototype , Instead of changing the prototype of the constructor

1、 Inheritance is the inheritance of prototype

* By setting __proto__ Implementation inheritance

      function User() {
    }
      User.prototype.name = function () {
    
        console.log("user.name");
      };

      function Admin() {
    }
      Admin.prototype.__proto__ = User.prototype;
      Admin.prototype.role = function () {
    
        console.log("admin.role");
      };
      
      let a = new Admin();
      
      a.name(); //user.name
      m.role(); //user.name

* adopt Object.create Implementation inheritance

      function User() {
    }
      User.prototype.name = function () {
    
        console.log("user.name");
      };

      function Admin() {
    }
      // take User Of prototype Generate a new object as a prototype , Then assign it to Admin Of prototype
      Admin.prototype = Object.create(User.prototype);
      Admin.prototype.role = function () {
    
        console.log("admin.role");
      };
      
      let a = new Admin();
      a.name(); //user.name

2、 Succession pair constructor Effect of attributes

        function User() {
     }

        User.prototype.name = function () {
    
            console.log('user.name');
        }

        function Admin() {
     }
        
        // Inherit User
        Admin.prototype = Object.create(User.prototype);
       
        Admin.prototype.role = function () {
    
            console.log('admin.role');
        }
        console.dir(Admin)//constructor  The loss of 
       

The following code ,a. __ proto __ Point to Admin.prototype , however Admin Of prototype Not on constructor attribute , So it will follow the prototype chain to find User.prototype Of constructor, So the final result will be output ture

        let a = new Admin();
        let b = new a.__proto__.constructor();
       
        console.dir(b.__proto__ === User.prototype)//true

solve ：

        // Inherit User
        Admin.prototype = Object.create(User.prototype);
        // Add... Manually  constructor attribute 
        Admin.prototype.constructor = Admin;
        Admin.prototype.role = function () {
    
            console.log('admin.role');
        }

3、 prohibit constructor Be traversed

        ...
        let a = new Admin();
        
        for (const key in a) {
    
            console.log(key);
        }

Why does it traverse out constructor?

        ...
        // Inherit User
        Admin.prototype = Object.create(User.prototype);
        Admin.prototype.constructor = Admin;

        console.log(Object.getOwnPropertyDescriptors(Admin.prototype));

property descriptor enumerable： Indicates that you can traverse

solve ：

        ...
        // Inherit User
        Admin.prototype = Object.create(User.prototype);
       // Open your mind , Inherit in another way 
        Object.defineProperty(Admin.prototype, 'constructor', {
    
            value: Admin,
            enumerable: false
        })

4、 Method override and parent property access

        function User() {
     }

        User.prototype.show = function () {
    
            console.log('user.name');
        }

        User.prototype.site = function () {
    
            return 'hello'
        }

        function Admin() {
     }

        // Inherit User
        Admin.prototype = Object.create(User.prototype);
        Admin.prototype.constructor = Admin;

        // Override parent class show Method 
        Admin.prototype.show = function () {
    
           // Parent property access 
            console.log(User.prototype.site() + 'admin.show')
        }

        let a = new Admin();
        a.show();

5、 Object oriented polymorphism

        function User() {
     }
        User.prototype.show = function () {
    
            console.log(this.desc());
        }

        function Admin() {
     }
        Admin.prototype = Object.create(User.prototype)
        Admin.prototype.desc = function () {
    
            return 'admin'
        }

        function Member() {
     }
        Member.prototype = Object.create(User.prototype);
        Member.prototype.desc = function () {
    
            return 'member'
        }

        for (const obj of [new Admin(), new Member()]) {
    
            obj.show()
        }

6、 Use the parent constructor to initialize the properties

        function User(name, age) {
    
            this.name = name;
            this.age = age;
        }

        User.prototype.show = function () {
    
            console.log(this.name, this.age);
        };

        function Admin(...args) {
    
            User.apply(this, args);
            // User.call(this, name, age)
        }

        Admin.prototype = Object.create(User.prototype);

        let zs = new Admin('zs', 10);

        zs.show();

7、 Use a prototype factory to encapsulate inheritance

        // Encapsulation inheritance 
        function extend(sub, sup) {
    
            sub.prototype = Object.create(sup.prototype);
            Object.defineProperty(sub.prototype, 'constructor', {
    
                value: sub,
                enumerable: false
            })
        }

        function User(name, age) {
    
            this.name = name;
            this.age = age;
        }
        User.prototype.show = function () {
    
            console.log(this.name, this.age);
        }

        function Admin(...args) {
    
            User.apply(this,args);
        }

        // Inherit 
        extend(Admin, User);

        let admin = new Admin(' Zhang San ', 19);

        admin.show();// Zhang San  19

8、 The object factory derives objects and implements inheritance

        function User(name, age) {
    
            this.name = name;
            this.age = age;
        }

        User.prototype.show = function () {
    
            console.log(this.name, this.age);
        }

        function admin(name, age) {
    
            // 1. Inherit 
            // const instance = {};
            // instance.__proto__ = User.prototype;

            // 2. Inherit 
            const instance = Object.create(User.prototype);
            User.call(instance, name, age);

            instance.role = function () {
    
                console.log('role');
            }
            return instance;
        }

        let obj = admin(' Zhang San ', 20);
        obj.role();

9、 Use mixin Implement multiple inheritance

        function extend(sub, sup) {
    
            sub.prototype = Object.create(sup.prototype);
            Object.defineProperty(sub.prototype, 'constructor', {
    
                value: sub,
                enumerable: false
            })
        }
        
        const Address = {
    
            getAddress() {
    
                console.log(' Get address ');
            }
        }

        const Request = {
    
            ajax() {
    
                console.log(' request ');
            }
        }
        function User(name, age) {
    
            this.name = name;
            this.age = age;
        }

        User.prototype.show = function () {
    
            console.log(this.name, this.age);
        }

        function Admin(name, age) {
    
            User.call(this, name, age)
        }
        // Inherit 
        extend(Admin, User);
        Admin.prototype = Object.assign(Admin.prototype, Request,Address);

        let admin = new Admin(' Zhang San ', 19);
        admin.ajax()
        admin.getAddress()

10、mixin Internal inheritance and super keyword

        ...
        const Address = {
    
            __proto__: Request,
            getAddress() {
    
                console.log(super.ajax() + ' Get address ');
            }
        }