es6 装饰器转 es5

weixin_41837346

于 2022-07-09 11:49:05 发布

阅读量206

点赞数

分类专栏： js 文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/weixin_41837346/article/details/125690109

版权

本文介绍了如何使用Babel将ES6的类和装饰器转换为ES5代码，包括构造函数的实现、原型和静态属性的转换，以及装饰器模式的解释和转换前后的代码对比。装饰器在前端开发中常用于类属性和类的扩展，例如HOC、redux connect等。

摘要由CSDN通过智能技术生成

es6 装饰器转 es5

babel 配置
es6 类的转换
es6 装饰器的转换

babel 配置

// package.json
"scripts": {
   
  "babel": "babel src/index.js --out-file src/babel_test.js",
}
"devDependencies": {
   
   "babel-cli": "^6.26.0",
   "babel-plugin-transform-decorators-legacy": "^1.3.5",
   "babel-preset-env": "^1.7.0"
}
// .babelrc
{
   
  "presets": ["env"],
  "plugins": ["transform-decorators-legacy"]
}

es6 类的转换

转换前代码

class Demo {
   
  constructor() {
   
    console.log("init");
  }
  say() {
   
    console.log("say");
  }
  static print() {
   
    console.log("print");
  }
}

const ins = new Demo();

转换后代码
- 通过构造函数实现 constructor
- 通过 Object.defineProperty 实现原型属性和静态属性

"use strict";
// 创建类的函数
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)