项目中遇到的原型解惑

原型链这个之前面试经常问，可我只知道概念，后来在公司做了项目后感觉对这个概念又深刻了一些，以此记录一下。对于创建对象，可能比较熟悉的是构造函数，通过new实例化创建不同的对象，可它有个缺点就是每个实例上都会创建多个相同的方法，事实上，这样是很占用内存的。

1、原型简要介绍

• 如果你能考虑prototype，也就是说当我们需要通过一个函数创建大量的对象,并且这些对象还都有许多相同的方法的时候，这时我们就要考虑在函数的prototype上添加这些方法。这种情况下我们代码的内存占用就比较小。看下面这个代码：这里的属性和方法都直接添加到了SuperType的原型对象上上，这样定义后实例化的对象仍拥有相应的属性和方法，而且这些属性和方法是所有实例共享的。
• 如果你改变某个方法, 那么由这个构造函数产生的所有对象的那个方法都会被改变.

 function SuperType(name) {
        this.name = name;
      }
       SuperType.prototype.age='12'
      SuperType.prototype.getSuperName = function () {
        return this.name;
      };
      const instance = new SuperType('张三');
      console.log(instance.getSuperName('张三')); // 张三
      console.log(instance.age)//12

2、 项目中遇到的原型

刚接触这个项目时发现请求数据都是这样的

  this.$xhr
        .$getRuleById({ id })
        .then(res => {
          if (res.data) {
            this.baseConfig = res.data;
          }
        })
        .catch(err => {
          that.$message.error(err.msg || "系统开小差了，请稍后再试！");
        });

为什么使用 this.$xhr，刚开始以为这个超出我的知识范围，后来把项目跑通后才发现原来就是原型这些事。
这句代码很关键 Vue.prototype.$xhr = new DynamicXhr();

在vue的实例下，可直接使用this.$xhr 方法，而A.prototype = new B()这个方法其实是说A能使用B的方法和属性，因此我可以通过this.$xhr 获取B对象上的所有方法。比如下面这个就是定义在DynamicXhr对象上的方法。

 $getRuleById(data = {}) {
    return this.$xhr("getRuleById", washData(data));
  }

另外Class 可以通过extends关键字实现继承

class DynamicXhr extends Base{ }

以上代码创建了一个DynamicXhr 类并且继承了Base类 里的所有方法，当调用this.$xhr .$getRuleById(会先查找vue的原型上有没有该方法，没有则去查找DynamicXhr对象上的方法, 找到了直接调用，而DynamicXhr是Base的子类，this.$xhr是Base上的方法，根据参数判断是获取接口数据还是mock数据，调用成功。

 $xhr (key, data = {}) {
    return this[this.constructor._kop ? '$kop' : '$ajax'].apply(this, arguments)
  }