首先创建一个Parent父类
class Parent { constructor(name) { this.name = name;// 实例的私有属性 } // 属于实例的公有属性,也就是相当于原型上的属性 getName() { console.log(this.name); }}let p = new Parent('xxx');p.getName();复制代码
我们可以打开,将上述代码复制后粘贴到Bable中,可以得到es2015的源码,如下代码:
'use strict';var _createClass = function () { // target是目标对象,此处是Parent,porps是属性对象数组 function defineProperties(target, props) { // 循环每个元素 for (var i = 0; i < props.length; i++) { // 取出每个属性描述器(这里是一个对象) var descriptor = props[i]; // 可枚举:for in 能循环出来 descriptor.enumerable = descriptor.enumerable || false; // 可配置:可以通过delete删除此属性 descriptor.configurable = true; // 若属性描述器中的value存在,则可修改值 if ("value" in descriptor) descriptor.writable = true; // 真正的向Parent类的原型对象上增加属性 Object.defineProperty(target, descriptor.key, descriptor); } } // 三个参数分别是 构造函数、原型上的属性、静态属性(类上的属性) return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; };}();function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); }}var Parent = function () { // 这个方法就相当于构造器constructor function Parent(name) { _classCallCheck(this, Parent); this.name = name; // 实例的私有属性 } // 属于实例的公有属性,也就是相当于原型上的属性 _createClass(Parent, [{ key: 'getName', value: function getName() { console.log(this.name); } }]); return Parent;}();var p = new Parent('xxx');p.getName();复制代码
1.Parent(name):相当于es6中的构造函数。
2._classCallCheck(instance,constructor):类的调用检查,其中有俩个参数,第一个参数是当前实例,第二个参数是构造函数,如果这个实例(instance)不是这个构造函数(Parent)的实例的话,就报错Cannot call a class as a function,不能把一个类当成普通函数来调用,即只能够使用new Parent('xxx')的形式创建,使用new关键字,而不是直接Parent('xxx'),当做一个普通的函数调用。
3._createClass:自执行,且返回一个函数,该函数有3个参数,分别是构造函数、原型上的属性、静态属性(类上的属性)