Class是ES6新增的继承机制。本文将讨论：1.ES6类实现细节2.相关对象API盘点3.Javascript盘点文本中的继承实现方案1.类实现细节classPerson{constructor(name,age){this.name=namethis.age=age}statictype='being'sayName(){returnthis.name}staticintro(){console.log("")}}classMenextendsPerson{constructor(name,age){super()this.gender='male'}}constmen=newMen()以上代码是ES6类的基本用法。通过babel解析后，主要代码结构如下：'usestrict';var_createClass=function(){...}();//给类添加方法function_possibleConstructorReturn(self,call){...}//实现超函数_inherits(subClass,superClass){...}//实现继承函数_classCallCheck(instance,Constructor){...}//防止调用classvarPerson作为函数=function(){functionPerson(name,age){_classCallCheck(this,Person);this.name=名称；这个。年龄=年龄；}_createClass(Person,[{key:'sayName',value:functionsayName(){returnthis.name;}}],[{key:'intro',value:函数介绍(){console.log("");}}]);返回人；}();Person.type='存在';//静态变量varMen=function(_Person){_inherits(Men,_Person);functionMen(name,age){_classCallCheck(this,Men);var_this=_possibleConstructorReturn(this,(Men.__proto__||Object.getPrototypeOf(Men)).call(this));_this.gender='男';返回_this；返回男人；}(Person);varmen=newMen();为什么说es6的类是基于原型继承的封装呢？开头省略的四个函数的作用是什么？接下来，我们将从前四个函数入手，详细讲解es6的类是如何封装的。首先：_classCallCheck函数，检查构造函数的调用方法：我们知道在javascript中person=newPerson()，通常完成以下几件事：1.创建一个新对象Object.create()2.将新对象的this指向构造函数的原型对象3.新对象的__proto__指向构造函数4.执行构造函数调用普通函数，this通常指向全局。因此，_classCallCheck函数用于检测类的调用方法。防止类构造函数作为普通函数被调用。第二：_createClass添加方法到类var_createClass=function(){functiondefineProperties(target,props){for(vari=0;i原型if(staticProps)defineProperties(Constructor,staticProps);返回构造函数；//静态函数->构造函数};}();_createClass是一个闭包+立即函数，这样模拟一个作用域，将defineProperties私有化。该函数的主要作用是通过Object.defineProperty为类添加方法，其中静态方法添加到构造函数中，非静态方法添加到构造函数的原型对象中。第三：_inheritsimplementinheritancefunction_inherits(subClass,superClass){if(typeofsuperClass!=="function"&&superClass!==null){thrownewTypeError("Superexpressionmusteitherbenullorafunction,not"+typeof超类）；}subClass.prototype=Object.create(superClass&&superClass.prototype,//子类原型的__proto__指向父类的原型//给子类添加constructor属性构造函数：{值：子类，可枚举：假，可写：真，可配置：真}}）；if(superClass)//子类__proto__指向父类Object.setPrototypeOf？Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}从这个函数可以很明显的看出该类实现了继承机制。第四：_possibleConstructorReturnsuper()function_possibleConstructorReturn(self,call){if(!self){thrownewReferenceError("thishasn'tbeeninitialized-super()hasn'tbeencalled");//保证子类构造在函数中显式调用super()}returncall&&(typeofcall==="object"||typeofcall==="function")?调用：自我；}理解这个函数的作用需要结合他的调用场景var_this=_possibleConstructorReturn(this,(Men.__proto__||Object.getPrototypeOf(Men)).call(this));//functionMen(){}此时_inherits函数已经执行完毕，Men.__proto__===Person等同于：var_this=_possibleConstructorReturn(this,Person.call(this));很明显，就是将子类的this指向父类。API总结根据上面的分析，es6类的实现机制也可以总结一下：类机制毫无疑问还是在prototype的基础上进行了封装——构造函数执行与构造函数相关的赋值——使用Object.defineProperty()方法在构造函数的原型上或在构造函数上添加方法——使用Object.create()和Object.setPrototypeOf实现类间的继承子类原型__proto__指向父类原型构造函数__proto__指向父类构造函数——通过改变子类的this作用域实现super()浅谈JavaScript的继承方式https://segmentfault.com/a/11...后记终于写完了。没有网络的帮助，写博客真的很难！就知道这件事必须要做！原来写一篇关于类的博客并不容易，就是原型链继承集，现在总结一下，需要注意的地方还是很多的；我学到了很多！好了不说了，我还有几个坑要填~如果本文对你有帮助，请点赞收藏！有问题欢迎积极留言，共同讨论，共同进步！参考文档ES6-class实现原理https://segmentfault.com/a/11...JavaScript红皮书
