function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return right[Symbol.hasInstance](left); } else { return left instanceof right; } } function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
_createClass和_defineProperties的作用
_createClass函数有三个参数，Constructor是传入构造函数Person，protoProps 是要添加到原型上的函数数组，staticProps 是要添加到构造函数本身的函数，即静态方法。这里的第二个和第三个参数是可以缺省的，会在_createClass 函数体内判断。
_createClass 函数的作用是收集公有函数和静态方法，将方法添加到构造函数或构造函数的原型中，并返回构造函数。
defineProperties 是将方法添加到构造函数或构造函数的原型中的主要逻辑，遍历函数数组，分别声明其描述符。若enumerable 没有被定义为true，则默认为fals，设置 configurable 为true。以上两个布尔值是为了限制 Object.keys() 之类的方法被遍历到。如果存在 value，就为 descriptor 添加 value 和 writable 属性，如果不存在，就直接使用 get 和 set 属性。
最后，使用 Object.defineProperty 方法为构造函数添加属性。
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; }
class类实现
var Person = /*#__PURE__*/ function () { function Person(name, age) { _classCallCheck(this, Person); this.name = name; this.age = age; } _createClass(Person, [{ key: "toString", value: function toString() { return '(' + this.name + ',' + this.age + ')'; } }]); return Person; }(); var p = new Person('Mia', 18);
解析：
不使用new调用时，this指向window，所以instance instanceof Constructor为false，抛出异常。
通过调用_createClass函数，遍历函数数组。key为方法名，若有value说明是有具体的 function 声明，若无 value 说明使用了get 或 set 方法。
结尾
读到这相信大家对class的实现有了更深的理解。最近笔者一边在忙毕业设计，一边整理了这道阿里前端面试题的解析，评论区欢迎对class实现这一问题进行讨论。另外，class中的extend也是很有趣的实现，在下一篇文章会对class实现继承进行解析。