知识体系：理解es6 class构造以及继承的底层实现原理

开始从事前端开始，我一直关注的是业务，最近慢慢意识到知识体系的重要性，我需要将我零散的知识点，以及模糊不清的javascript理论知识慢慢的串联起来，巩固扎实，形成自己的知识体系，
我受到启发的是掘金的一篇文章：https://juejin.im/post/5cc1da82f265da036023b628 《一名【合格】前端工程师的自检清单》
今天通过查资料以及通过babel官网的转义，进行debugger，自己理解了一下 class构造以及继承的底层实现原理

	//转义前
	class Parent{
		constructor(name,age){
	  		this.name = name
	      this.age = age
	 	 }
	 	 //类公有方法
		  sayName(){
		  	console.log(this.name)
		  }
		  //静态方法
 		 static sayhi(){
  			console.log(this.name)
  		}
	}
	//经过babel官网转义后
	var Parent = /*#__PURE__*/function () {
		function Parent(name, age) {
   		   _classCallCheck(this, Parent);
		    this.name = name;
		    this.age = age;
	   }
	  _createClass(Parent, [{
	    key: "sayName",
	    value: function sayName() {
	      console.log(this.name);
	    }
	  }], [{
	    key: "sayhi",
	    value: function sayhi() {
	      console.log(this.name);
	    }
	}]);
 	return Parent;
}();

原理
1.从转义的结果来看，class的constructor本质上还是构造函数
2.首先通过_classCallCheck 来检测是否是new，而不是直接执行构造函数，在es5中是可以直接运行构造函数的，我们看下这个函数：

	function _classCallCheck(instance, Constructor) {
		if (! instance instanceof Constructor) { 
		 	throw new TypeError("Cannot call a class as a function");
		 } 
	}

这里我们可以看出，如果你是直接执行的，那么你的这个this就是undefined,因为是严格模式，如果是非严格模式则是window对象 ,所以 this instanceof Parent,那肯定是false,就会报错，如果是通过new,那么this是Parent的一个对象, 这时候 this instanceof Parent 就是true，就会执行构造函数

3.而静态方法和类公有方法则是通过_createClass方法添加

function _defineProperties(target, props) { 
	for (var i = 0; i < props.length; i++) { 
		var descriptor = props[i]; 
		descriptor.enumerable = descriptor.enumerable || false; 
		descriptor.configurable = true; 
		if ("value" in descriptor) 
		descriptor.writable = true; 
		Object.defineProperty(target, descriptor.key, descriptor); 
	} 
}

function _createClass(Constructor, protoProps, staticProps) { 
	if (protoProps) 
		_defineProperties(Constructor.prototype, protoProps); 
	if (staticProps) 
		_defineProperties(Constructor, staticProps); 
	return Constructor; 
}

_createClass第一个参数是构造函数，第二个是共有方法数组，被转成了有key和value两个属性的对象，第三个就是静态方法，结构和第二个参数一致
将共有的方法添加到原型对象上Parent.prototype，将静态的方法直接添加到构造函数上，这样就可以直接通过函数名点的形式调用方法
4.最后一步将新的函数返回

class继承

//转义前
class Parent{
	constructor(name,age){
		this.name = name
		this.age = age
	}
	sayName(){
		console.log(this.name)
	}
	static sayhi(){
		console.log(this.name)
	}
}

class Child extends Parent{
	constructor(name,age){
		super()
	}
	sayName(){
		console.log(this.name)
	}
}
//转义后
var Parent = /*#__PURE__*/function () {
	function Parent(name, age) {
		_classCallCheck(this, Parent);
		
		this.name = name;
		this.age = age;
	}
	
	_createClass(Parent, [{
		key: "sayName",
		value: function sayName() {
		console.log(this.name);
	}
	}], [{
		key: "sayhi",
		value: function sayhi() {
		console.log(this.name);
	}
	}]);
	return Parent;
}();

var Child = /*#__PURE__*/function (_Parent) {
	 //将子类构造函数的prototype指向父类构造函数的prototype
	 //将父构造函数指向子构造函数的_proto_
	_inherits(Child, _Parent);
	
	var _super = _createSuper(Child);
	
	function Child(name, age) {
		_classCallCheck(this, Child);
		
		return _super.call(this);
	}
	
	_createClass(Child, [{
		key: "sayName",
		value: function sayName() {
		console.log(this.name);
	}
	}]);

	return Child;
}(Parent);

parent部分和上方是一样的，主要讲讲Child部分
1.用一个闭包保存父类引用，在闭包内部做子类构造逻辑
2.之后执行的是_inherits方法，它其实就是将子类构造函数的prototype指向父类构造函数的prototype，以及将父构造函数指向子构造函数的_proto_ 看代码：

function _inherits(subClass, superClass) { 
	if (typeof superClass !== "function" && superClass !== null) { 
		throw new TypeError("Super expression must either be null or a function"); 
	} 
	//这里将子类原型对象的constructor 赋值了子类构造函数本身（之后调用super会有用）
	subClass.prototype = Object.create(superClass && superClass.prototype,{ 
		constructor: { value: subClass, writable: true, configurable: true }    
	}); 
	if (superClass) 
	_setPrototypeOf(subClass, superClass);  //子类构造函数的__proto__指向了父类构造函数（之后调用super会有用）
}

_inherits先是校验父构造函数,是不是一个函数和null，
然后用父类构造函数的proptype创建一个空对象，并将这个对象指向子类构造函数的proptype，将子类原型对象的constructor指向子类构造函数本身
3.紧接着执行var _super = _createSuper(Child); 这个是干嘛的呢，这个就是之后为之后执行super，子类继承父类属性做准备

function _createSuper(Derived) { 
	var hasNativeReflectConstruct = _isNativeReflectConstruct(); 
	return function _createSuperInternal() {
			var Super = _getPrototypeOf(Derived), result; 
			if (hasNativeReflectConstruct) { 
				var NewTarget = _getPrototypeOf(this).constructor;  
				result = Reflect.construct(Super, arguments, NewTarget); 
				//相当于
				// result = Object.create(NewTarget)
				// Super.apply(NewTarget, arguments)
			} else { 
				result = Super.apply(this, arguments); 
			} 
			return _possibleConstructorReturn(this, result); 
	}; 
}

这个函数返回的是用于一个继承父类内部属性一个函数_isNativeReflectConstruct就是看你支不支持Reflect，Proxy，如果判断之后不支持就会降级使用apply，来继承父类的内部属性和方法

一切准备就绪之后，当你创建Child的实例的时候，super()被转义成了_super.call(this);
我就当hasNativeReflectConstruct为true，最终执行的就是

	result = Reflect.construct(Super, arguments, NewTarget); 

Super = _getPrototypeOf(Derived), _getPrototypeOf其实就是Object.getPrototypeOf(Derived),Derived是之前传的子类构造函数，Super最终就是Child._proto,而这个在上面第二步时候，子类构造函数的__proto已经指向了父类构造函数，所以Super就是父类构造函数
NewTarget =_getPrototypeOf(this).constructor;这个也是第二步父类构造函数的proptype创建一个空对象，已经将子类原型对象的constructor指向子类构造函数本身，所以NewTarget是子类构造函数

那么result就相当于

	result = Object.create(NewTarget)
	Super.apply(NewTarget, arguments)

这个不就是创建一个对象来继承父类的内部属性和方法，就达到了子类构造函数中调用父类构造函数的目的，新创建的Child实例就会动态拥有父类的内部属性和方法

Class其实就是 es6 给我们提供了一个“组合寄生继承”的简单写法
这就是我今天的分享，说的不对的欢迎指出