Es6 Class是如何实现的？

在Es5中没有类的概念，在将类以前咱们首先要说一下类的继承

类的继承

类有三种属性，，公有属性，私有属性， 静态属性（Es7）/静态类（Es6）

如何实现一个类

• 继承公有属性

function Parent(){
    this.name = 'parent';
}
new Parent();//this指向当前实例
Parent() //this指向window
function Child(){
    this.age = 9;
    Parent.call(this);//至关于this.name = 'parent' //继承私有属性
}
复制代码

• 继承父类属性
  • 严格来讲，通常规范带下划线的就叫私有，即便继承，类的私有属性也不会继承，私有属性只有类的内部方法能访问的属性，咱们这里将原有继承私有属性改成继承父类属性，对给你们带来的误解和困扰表示抱歉，文章有误的地方欢迎你们评论，谢谢你们！谢谢 @MrTreasure！

function Parent(){
    this.name = 'parent';
}
Parent.prototype.eat = function(){
    console.log('eat')
}
function Child(){
    this.age = 9;
    Parent.call(this);//至关于this.name = 'parent' //继承私有属性
}
Child.prototype.smoking = function(){
    console.log('smoking')
}
Child.prototype = Parent.prototype;//这个不叫继承
//由于这样若是改变 Child.prototype 加属性，Parent.prototype的实例也会有这个属性，，此时这二者属于兄弟关系

Child.prototype._proto_ = Parent.prototype   // 方法一
//object.create
Child.prototype = object.create(Parent.prototype); // 经常使用,方法二
function create(parentPrototype,props){
    function Fn(){}
    Fn.prototype = parentPrototype;
    let fn = new Fn();
    for(let key in props){
        Object.defineProperty(fn,key,{
            ...props[key],
            enumerable:true
        });
    }
    return fn();
}
Child.prototype = create(Parent.prototype,{constructor:{value:Child}})

![](https://user-gold-cdn.xitu.io/2018/5/28/163a486d1740a83f?w=1220&h=634&f=png&s=369712)

复制代码

• 继承公有属性和私有属性 Child.prototype = new Parent()

类的编译

1. 类只能new

class Parent{
    //私有属性
    constructor(){
        this.name = 'parent',
        this.age = '40'
    }
    //公有属性，原型上的方法
    eat(){
        console.log('eat')
    }
    //静态方法/属性 es6/es7
    //属于类上的方法 Child.a()
    static b(){
        return 2
    }
}
new Parent();
class Child extends Parent{ //继承父亲的私有和公有
    //私有属性
    constructor(){
        super() // 至关于Parent.call(this)
        this.name = 'child'
    }
    //公有属性，原型上的方法
    smoking(){
        console.log('smoking')
    }
    //静态方法/属性 es6/es7
    //属于类上的方法 Child.a()
    static a(){
        return 1
    }
}
let child = new Child();
console.log(child.name,child.age,child.eat(),child.smoking,Child.b())
//类能够继承公有，私有和静态
//父类的构造函数中返回类一个引用类型，会把这个引用类型做为子类的this
复制代码

咱们首先写一个建立类的函数

//检测实例是否是new出来的
function _classCallCheck(instance,constructor){
  if(!(instance instanceof constructor)){
    throw new Error('Class constructor Child cannot be invoked without new')
  }
}
//constructor构造函数
//prprotoPropertys构造函数原型
//staticPropertys静态方法的描述
function definePropertys(target,arr){
  for(let i=0;i<arr.length;i++){
    Object.defineProperty(target,arr[i].key,{
      ...arr[i],
      configurable : true,
      enumerable : true,
      writable:true
    })
  }
}
function _createClass(constructor,protoPropertys,staticPropertys){
  if(protoPropertys.length > 0){
    definePropertys(constructor.prototype,protoPropertys)
  }
  if(staticPropertys.length > 0){
    definePropertys(constructor,staticPropertys)
  }
}
let Parent = function(){
  //写逻辑
  function P(){
    _classCallCheck(this,P)
    this.name = 'parent';
    //return {}
  }
  _createClass(P,//属性描述器
    [
      {
        key: 'eat',
        value: function () {
          console.log('吃')
        }
      }
    ],
    [
      {
        key:'b',
        value:function () {
          return 2;
        }
      }
    ]
  )
  return P;
}()
let p = new Parent();
console.log(p.eat())
复制代码

上面这个函数没有继承做用，下面咱们逐步完善

类的继承

function _inherits(subClass,superClass){
  //继承公有属性
  subClass.prototype = Object.create(superClass.prototype,{constructor:{
    value:subClass
  }})
  //继承静态方法
  Object.setPrototypeOf(subClass,superClass);
}
let Child = (function(Parent){
  _inherits(C,Parent)
  //继承私有属性
  function C(){
    _classCallCheck(this,C);
    let that = this;
    let obj = Parent.call(this);//继承并执行父类
    if(typeof obj === 'object'){
      that = obj
    }
    that.age = 9 ; //解决了父类返回引用类型的问题
  } 
  return C;
})(Parent)
let child = new Child()
console.log(child)
console.log(Child.b())
console.log(parent)

[Running] node "/Users/myloveyunyun/Desktop/node/pro.js"
C { name: 'parent', age: 9 }
2
P { name: 'parent' }

复制代码

这样咱们的类就建立完成了