当前位置:
首页 > temp > JavaScript教程 >
-
从babel编译结果分析class的实现原理
示例:
class A { // 属性表达式 prop1 = 1; // get方法 get value() { console.log('Getting the current value!'); return this.prop1; } // set方法 set value(newValue) { console.log('Setting the current value!'); this.prop1 = newValue; } // 箭头函数表达式 arrowFunc = (...args) => { console.log(args); } // constructor constructor(b = 2) { this.prop2 = b; } // 普通函数表达式 Func() { console.log("Func"); } // 静态属性 static prop3 = 3; // 静态普通函数 static staticFunc() { console.log("staticFunc", this); } // 静态箭头函数 static staticArrowFunc = () => { console.log("staticArrowFunc", this); } } const a = new A(3);
使用babel编译成es5的代码,编译结果会生成几个内部函数:
// 类的调用检查,如果调用A不使用new,则会报错 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } } // 定义原型上的普通函数、静态普通函数、get和set方法
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } // 定义属性到obj上,重新赋值使用defineProperty,第一次赋值直接添加属性 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
类的编译结果:
// A是一个立即执行函数 返回结果是个函数 函数名就是类名 var A = /*#__PURE__*/ (function () { // constructor function A() { // 转化constructor中的默认参数 var b = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2; // 检查类是否使用new执行 _classCallCheck(this, A); // 属性表达式定义到类实例上 _defineProperty(this, "prop1", 1); // 箭头函数表达式定义到类实例上 _defineProperty(this, "arrowFunc", function () { // 这个for循环是转换...args,遍历arguments,将每一项赋值给args对象 for ( var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++ ) { args[_key] = arguments[_key]; } console.log(args); }); this.prop2 = b; } _createClass( A, [ {// get和set方法 key: "value", get: function get() { console.log("Getting the current value!"); return this.prop1; }, set: function set(newValue) { console.log("Setting the current value!"); this.prop1 = newValue; } }, {// 普通函数表达式 key: "Func", value: function Func() { console.log("Func"); } } ], [ {// 静态普通函数 key: "staticFunc", value: function staticFunc() { console.log("staticFunc", this); } } ] ); return A; })(); // 静态属性定义到类上 _defineProperty(A, "prop3", 3); // 静态箭头函数定义到类上 _defineProperty(A, "staticArrowFunc", function () { console.log("staticArrowFunc", A); }); var a = new A(3);
下图可描述整个编译结果:
需要注意的是:
- 类原型上的方法、类的静态方法、类的get和set方法默认是不可枚举的
- 类实例上的方法和属性、类的静态箭头函数是可枚举的
来源:https://www.cnblogs.com/zhengrongbaba/p/15266927.html
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
SQL Server -- 解决存储过程传入参数作为s
关于JS定时器的整理
JS中使用Promise.all控制所有的异步请求都完
js中字符串的方法
import-local执行流程与node模块路径解析流程
检测数据类型的四种方法
js中数组的方法,32种方法
前端操作方法
数据类型
window.localStorage.setItem 和 localStorage.setIte
如何完美解决前端数字计算精度丢失与数