一段符合ES6语法的代码es6
class a{ constructor(y,z){ this.y =y; this.z =z; } render(){ console.log(1) } } class b extends a{ constructor(m,n){ super(); this.m=m; this.n=n; } render(){ console.log(2); } }
我在babel官网上输入,查看转码(),代码长不少,从中找出关键点:express
classbabel
constructor函数
extendthis
superes5
声明class class a(){}
查看对应转码 var a = function(){return a}()
能够看出声明一个class就是经过建立并执行一个匿名函数,在这个匿名函数中声明function a
,最后返回a。prototype
constructor(y,z){ this.y =y; this.z =z; }
对应转码:code
function a(y, z) { _classCallCheck(this, a); this.y = y; this.z = z; }
将_classCallCheck(this,a)
提出对象
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
这个方面便是判断this的[[prototype]]是否有指向a.prototype的对象。便是判断本来是否是有a这个function。??感受解释的很差。
而后再在a(本质是function,但能够被称做class)中声明属性y,z。
接下来,在class a中有一个render方法,ip
_createClass(a, [{ key: "render", value: function render() { console.log(1); } }]);
经过_createClass
方法,能够给a添加render方法。
将_createClass
提出来看。
var _createClass = function () { // 给对象添加属性 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);//给target添加属性 } } // 返回函数 return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();//当即执行
由上推断es6给class添加的属性、方法背后是es5对给对象添加属性的方法。
一样再转码中,找到了对应的_inherits(b, _a)
function _inherits(subClass, superClass) { // 确保superClass为function if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } // subClass.prototype的[[prototype]]关联到superClass superClass.prototype // 给subClass添加constructor这个属性 subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); // 设置subclass的内置[[prototype]]与superClass相关联 if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
能够看出extend
背后是经过js的原型链实现的。
其中在class b extends a
中要将a传入b中。
其中对应的转码:
function b(m, n) { _classCallCheck(this, b); var _this = _possibleConstructorReturn(this, (b.__proto__ || Object.getPrototypeOf(b)).call(this)); _this.m = m; _this.n = n; return _this; }
其中_possibleConstructorReturn
实现了super
的原理。
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } //显示绑定b的内置[[prototype]]到this,即在b中执行b原型链上关联的属性。 return call && (typeof call === "object" || typeof call === "function") ? call : self; }