JavaScript 中继承合集

需要的几个Object对象的方法

开始之前先介绍几个Object对象的方法。

• Object.create(原型[ , 属性配置 ])：创建对象并指定对象的原型；

        let web = Object.create(user, {
            name: {
                value: "wed of name", // name的值
                configurable: true, // 可配置属性
                enumerable: true, // 该属性可遍历
                writable: true // 该属性可更改值
            },
        }

• Object.getOwnPropertyDescriptors(object)：查看object对象的属性描述信息；
  类似下图的信息。
  
• Object.setPrototypeOf(target, proto) ：设置target对象的原型为proto；
• Object.getPrototypeOf(target)：获取target对象的原型；

        // 把js的原型设置为user
        Object.setPrototypeOf(js, user);
        console.log(Object.getPrototypeOf(js));

• Object.defineProperty(obj , 属性 , 配置对象) :

Object.defineProperty（obj，atrr，cfigObj）
obj ：参数是设置属性的对象
atrr：是指设置的属性名
cfigObj：是指设置属性的配置属性，四个属性
1）value ： 属性值
2）enumerable：是否可遍历
3）writable：是否可更改
4）configurable：是否可配置，简单理解就是能不能对属性进行增、删、该、以及是否可以把属性修改为访问器属性。

• Object.assign(target，…source)：获取source对象的所以属性和方法添加到target对象中；

圣杯模式

我的这篇文章——圣杯模式详细的写了整个过程，再次学习Object对象时，发现一个问题，就是子类继承了父类之后，实例化出来的对象的原型中constructor属性是可遍历的，假如我们使用 for of语句遍历对象，则会把 constructor 属性遍历出来，这样就不好了，这里更改一下 constructor 属性的设置。
采取Object.defineProperty（） 方法定义属性。

        // 继承封装函数
        function extend(Sub, Super) {
            // 圣杯模式继承 
            let F = function () {};
            F.prototype = Super.prototype;
            Sub.prototype = new F();
            Sub.prototype.uber = Super.prototype;
            // Son.prototype.constructor = Son;
            // 存在问题，constructor是可遍历的，我们需要设置constructor不可遍历
            Object.defineProperty(Sub.prototype, "constructor", {
                value: Sub,
                enumerable: false, // 不可遍历
                writable: true, // 可更改
                configurable: true // 可配置
            })
       }

原型工厂

使用 Object.create() 方法设置对象的原型，最后要定义一下对象的原型中constructor属性不可遍历

		function extend(Sub,Super){
		// 2. 新创建一个对象 并为其指定原型为Super.prototype 原型工厂
            Sub.prototype = Object.create(Super.prototype);
            Object.defineProperty(Sub.prototype, "constructor", {
                value: Sub,
                // 存在问题，constructor是可遍历的，我们需要设置不可遍历
                enumerable: false, // 不可遍历
                writable: true, // 可更改
                configurable: true // 可配置
            })
            // 需要在原型上添加方法或者属性时，
            // 一定要在继承之后添加，否则会覆盖，导致新添加的属性和方法消失
        }

原型的继承

简单的一句话，子类构造函数的原型的原型对象设置为父类的构造函数的原型。
函数它本身也是一个对象，构造函数同样是一个对象，所以构造函数也有自己的__proto__ 属性，指向构造函数的原型。
继承的核心思想就是让原型继承原型，而不是构造函数继承原型。

	function extend(Sub,Super){
		Sub.prototype.__proto__ = Super.prototype;
	}

测试

函数封装完毕后，写程序测试一下。

       
       User.prototype.run = function () {
            this.show();
        }
        User.prototype.sayAge = function () {
            console.log(this.age);
        }

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

        extend(Vip, User);
                // 重写父类的show方法
        Vip.prototype.show = function () {
            console.log("Vip show meothd");
        }

        // ...在接收参数时是聚合成数组，args接收参数组成的数组；...在使用参数时是打散数组，展开
        function Vip(...args) { // 接收参数时是一个数组
            // 借用父类属性
            User.apply(this, args); // 在使用的时候args是数组，若需要使用每个元素，展开即可，...args
        }
        
        // 测试继承
        let user1 = new User("ff", 18);
        let vip = new Vip("tt", 15);
        vip.run();
        vip.sayAge();
        // console.log(Vip.prototype.constructor); // 指回自己的构造器

        // 测试constructor属性不可遍历
        console.dir(Object.getOwnPropertyDescriptors(Vip.prototype));
        for (const key in vip) {
            console.log(key); // 没有遍历出constructor
        }

解决多继承问题 —— 混合 （mixin）

多继承会导致整个代码结构很混乱，代码结构不健壮，而且可读性比较差，可以使用混合，其实混合这个概念一听比较高大上，听起来有点混乱，但是当我看到是 assign() 方法时，瞬间放松了。混合核心就是把目标对象所需要的功能或者属性添加到目标对象中，刚好assign() 方法能够实现属性的合并。

Object.assign ( ) 方法

    Object.assign(targetObj,...source)
    assign方法 : 
    参数1: 目标对象
    参数2: 源对象
    返回值: 目标对象
    函数作用: 把一个或多个源对象中所有可枚举的所有属性的值复制到目标对象
    简单理解可是属性的合并

混合的实现

定义两个构造函数，User构造出来的实例对象，有请求后台的功能、获取积分的功能、登录的功能…
如果把每个功能都写成函数，就太乱了，我们应该把每个功能封装成一个对象，需要其中的属性或方法之间调取即可，这样结构清晰，可读性高，代码显得更加健壮。

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

        function Vip(...args) { // 接收参数时是一个数组
            // 借用父类属性
            User.apply(this, args); // 在使用的时候args是数组，若需要使用每个元素，展开即可，...args
        }

分别定义各个功能模块的对象

        // 把各个模块功能全部变成对象，功能中的小功能变成方法
        const Request = {
            quest() {
                return "请求后台";
            }
        };
        const Integral = {
            total() {
                console.log( "获取积分");
            }
        };
        const Login = {
            login() {
                console.log("跳转登录页面");
            }
        };
        const VipPic = {
            showVip() {
                console.log(this.name + "是vip会员");
            }
        }

对象添加 功能模块对象

使得User实例化的对象能够调用各个功能模块中的方法；
Vip实例化对象可以获得vip相关信息的功能。

        let user = new User("ff", 18);
        // User需要 Request Integral Login中的方法
        User.prototype = Object.assign(User.prototype, Request, Integral, Login);
        user.total();

        let vip = new Vip("tt", 18);
        // Vip需要使用 VipPick对象的方法
        Vip.prototype = Object.assign(Vip.prototype, VipPic);
        vip.showvip();

功能模块对象之间相互添加

在获取积分时，肯定是请求后台，我们接收后台返回的数据最终获取，这时候就需要在获取积分的时候去请求后台了，换句话说就是需要在获取积分的功能块中添加请求后台的功能。
使用super关键字，实现功能与功能之间的添加使用。
两步操作：

1. 目标对象的__proto__ 属性指向添加的功能对象；
2. 使用super关键字调用相应的属性或方法。

        const Integral = {
            __proto__: Request,
            // super == >this.__proto__
            total() {
                console.log(super.quest() + ": 获取积分");
            }
        };

此时再去实例化对象，调用积分的total方法时，就能调用请求后台的方法了。

        let user = new User("ff", 18);
        // User需要 Request Integral Login中的方法
        User.prototype = Object.assign(User.prototype, Request, Integral, Login);
        user.total();

继承的学习一开始会有点绕，多看几遍就可以。
加油！！！