博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
es6中Class转成es5原理
阅读量:7163 次
发布时间:2019-06-29

本文共 1981 字,大约阅读时间需要 6 分钟。

首先创建一个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个参数,分别是构造函数、原型上的属性、静态属性(类上的属性)

转载于:https://juejin.im/post/5beab63151882572ac7f0c51

你可能感兴趣的文章