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 / 构造器模式)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Scrum精髓
Kenneth Rubin / 姜信宝、米全喜、左洪斌、(审校)徐毅 / 清华大学出版社 / 2014-6-1 / CNY 79.00
短短几年时间,Scrum跃升为敏捷首选方法,在全球各地得以普遍应用。针对如何用好、用巧这个看似简单的框架,本书以通俗易懂的语言、条理清晰的脉络阐述和提炼出Scrum的精髓。全书共4部分23章,阐述了七大核心概念:Scrum框架,敏捷原则,冲刺,需求和用户故事,产品列表,估算与速率,技术债;三大角色:产品负责人,ScrumMaster,开发团队以及Scrum团队构成:Scrum规划原则及四大规划活动......一起来看看 《Scrum精髓》 这本书的介绍吧!
图片转BASE64编码
在线图片转Base64编码工具
HEX HSV 转换工具
HEX HSV 互换工具