ES6 Class 与 ES5 构造函数对比(Babel编译)
栏目: JavaScript · 发布时间: 5年前
内容简介:注意:name、age不是定义在原型上的属性实例属性新写法
User
类被编译以后转化为构造函数。被编译后生成了 _classCallCheck
, _instanceof
方法。
class User{ } const user = new User(); console.log(user); // {} //↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑ //↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓ "use strict"; 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"); } } var User = function User() { _classCallCheck(this, User); }; var user = new User(); console.log(user); // {} 复制代码
普通属性
User
类有 name、age、address
三个属性, name、age
属性采用 Object.defineProperty
的方式定义属性。
虽然与 address
赋值方式不一样,但是最终的效果是一致的。
注意:name、age不是定义在原型上的属性实例属性新写法
class User{ name = "jason"; age = 18; constructor(){ this.address = "shanxi"; } } const user = new User(); console.log(user); //{ name: 'jason', age: 18, address: 'shanxi' } //↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑ //↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 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; } var User = function User() { _classCallCheck(this, User); _defineProperty(this, "name", "jason"); _defineProperty(this, "age", 18); this.address = "shanxi"; }; 复制代码
以下代码省略了 _defineProperty
, _classCallCheck
, _instanceof
等公用的方法。
普通函数
sayName
函数在构造函数的原型上
调用了 _defineProperties(Constructor.prototype, protoProps);
class User{ name = "jason"; sayName(){ console.log(this.name); } } const user = new User(); user.sayName() //↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑ //↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 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; } var User = (function() { function User() { _classCallCheck(this, User); _defineProperty(this, "name", "jason"); } _createClass(User, [ { key: "sayName", value: function sayName() { console.log(this.name); } } ]); return User; })(); var user = new User(); user.sayName() 复制代码
箭头函数
箭头函数在编译后对this做了绑定
class User{ name = "jason"; sayName = () => { console.log(this.name); } } //↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑ //↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓ var User = function User() { var _this = this; _classCallCheck(this, User); _defineProperty(this, "name", "jason"); _defineProperty(this, "sayName", function() { console.log(_this.name); }); }; 复制代码
静态属性
静态属性作为 构造函数 的一个属性存在
class User{ static name = "jason"; } //↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑ //↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓ var User = function User() { _classCallCheck(this, User); }; //省略_defineProperty方法源码 //静态属性 被编译后 第一个参数是User,而普通属性则是this _defineProperty(User, "name", "jason"); 复制代码
静态方法
静态方法 sayName
作为 构造函数
的一个属性存在
class User { name = "jason" static sayName() { } } //↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑ //↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 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; } var User = /*#__PURE__*/ function () { function User() { _classCallCheck(this, User); _defineProperty(this, "name", "jason"); } //静态函数编译后,第二个参数设置为null _createClass(User, null, [{ key: "sayName", value: function sayName() {} }]); return User; }(); 复制代码
以上所述就是小编给大家介绍的《ES6 Class 与 ES5 构造函数对比(Babel编译)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Laravel Database——查询构造器与语法编译器源码分析 (下)
- Laravel Database——查询构造器与语法编译器源码分析 (中)
- Laravel Database——查询构造器与语法编译器源码分析 (上)
- Java类 静态代码块、构造代码块、构造函数初始化顺序
- TS 的构造签名和构造函数类型是啥?傻傻分不清楚
- 只有你能 new 出来!.NET 隐藏构造函数的 n 种方法(Builder Pattern / 构造器模式)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JSP网站开发四“酷”全书
万峰科技 / 电子工业出版社 / 2005-9 / 49.00元
本书以JSP为开发语言,选取当前最流行、最具代表性的4类网站:新闻站点、论坛、电子商城和博客(Blog)系统为例,详细介绍了使用JSP开发网站的核心技术。掌握了本书所举4类网站的开发技术,将帮助你成为网站开发的“全能冠军”。 本书结合作者多年在网站系统开发方面的经验,从系统的需求分析开始,确定系统的流程与设计,到模块的划分,再到数据加结构的设计,最后开始每个模块编程开发,贯穿了网站开......一起来看看 《JSP网站开发四“酷”全书》 这本书的介绍吧!
JS 压缩/解压工具
在线压缩/解压 JS 代码
在线进制转换器
各进制数互转换器