JavaScript——继承

js 中的继承是原型的继承，而不是改变构造函数的原型

1、继承是原型的继承

*通过设置__proto__实现继承

      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

*通过Object.create实现继承

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

      function Admin() {}
      //将User的prototype作为原型生成一个新对象，再将其赋值给Admin的prototype
      Admin.prototype = Object.create(User.prototype);
      Admin.prototype.role = function () {
        console.log("admin.role");
      };
      
      let a = new Admin();
      a.name(); //user.name

2、继承对 constructor 属性的影响

        function User() { }

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

        function Admin() { }
        
        //继承User
        Admin.prototype = Object.create(User.prototype);
       
        Admin.prototype.role = function () {
            console.log('admin.role');
        }
        console.dir(Admin)//constructor 丢失
       

如下代码，a. __ proto __ 指向Admin.prototype ，但是Admin的prototype上没有constructor属性，所以就会延着原型链找到User.prototype的constructor，所以最后结果会输出 ture

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

解决：

        //继承User
        Admin.prototype = Object.create(User.prototype);
        //手动加上 constructor属性
        Admin.prototype.constructor = Admin;
        Admin.prototype.role = function () {
            console.log('admin.role');
        }

3、禁止 constructor 被遍历

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

为什么会遍历出 constructor?

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

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

属性描述符 enumerable：表示可以遍历

解决：

        ...
        //继承User
        Admin.prototype = Object.create(User.prototype);
       //思路打开，换种方式继承
        Object.defineProperty(Admin.prototype, 'constructor', {
            value: Admin,
            enumerable: false
        })

4、方法重写与父级属性访问

        function User() { }

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

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

        function Admin() { }

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

        //重写父类show方法
        Admin.prototype.show = function () {
           //父级属性访问
            console.log(User.prototype.site() + 'admin.show')
        }

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

5、面向对象的多态

        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、使用父类构造函数初始属性

        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、使用原型工厂封装继承

        //封装继承
        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);
        }

        //继承
        extend(Admin, User);

        let admin = new Admin('张三', 19);

        admin.show();//张三 19

8、对象工厂派生对象并实现继承

        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.继承
            // const instance = {};
            // instance.__proto__ = User.prototype;

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

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

        let obj = admin('张三', 20);
        obj.role();

9、使用mixin实现多继承

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

        const Request = {
            ajax() {
                console.log('请求');
            }
        }
        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)
        }
        //继承
        extend(Admin, User);
        Admin.prototype = Object.assign(Admin.prototype, Request,Address);

        let admin = new Admin('张三', 19);
        admin.ajax()
        admin.getAddress()

10、mixin内部继承与super关键字

        ...
        const Address = {
            __proto__: Request,
            getAddress() {
                console.log(super.ajax() + '获取地址');
            }
        }