ES5 VS ES6 -- class 編譯 · 前端知識 -- 學習整理

>[success] # 使用babel 編譯es6 class 寫法變成es5 [babeljs](https://www.babeljs.cn/repl#?browsers=defaults&build=&builtIns=entry&corejs=3.21&spec=false&loose=false&code_lz=FAYwNghgzlAECCBvYBIAdhAtgU1gXlgEZhZSBzbAFwDktsAKASmRRQCcqBXNtWSgCwCWUAHQYcJUgF9gM0AHs0USrAj5YabAHcETIA&debug=false&forceAllTransforms=true&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Cstage-0%2Cstage-1%2Cstage-2%2Cstage-3&prettier=false&targets=Electron-1&version=7.18.13&externalPlugins=&assumptions=%7B%7D) * 編譯前 ~~~ class A{ name = 1 getName(){ return this.name } } const a = new A() ~~~ * 編譯后 ~~~ 'use strict' // 判讀當前是通過new 創建的而不是方法直接調用 function _classCallCheck(instance, Constructor) { // 當前創建實例必須是通過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) } } function _createClass(Constructor, protoProps, staticProps) { // 如果是實例方法就綁定在原型鏈上 if (protoProps) _defineProperties(Constructor.prototype, protoProps) // 如果是靜態方法就綁定在構造函數上 if (staticProps) _defineProperties(Constructor, staticProps) // 原型鏈方法不可以寫的 Object.defineProperty(Constructor, 'prototype', { writable: false }) return Constructor } // 給當前屬性賦值 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 A = /*#__PURE__*/ (function () { function A() { /** * 當執行 var a = new A(); 時候此時this 指向是對象本身 * 對象是通過構造函數 A 創建的，因此instance instanceof Constructor 為true * 這里是為了滿足class 創建的類只能通過new 創建不能當方法調用來判斷方法的this 指向windows */ _classCallCheck(this, A) // 給當前屬性賦值 _defineProperty(this, 'name', 1) } _createClass(A, [ { key: 'getName', value: function getName() { return this.name }, }, ]) return A })() new A() ~~~ * 增加繼承前 ~~~ class A{ name = 1 getName(){ return this.name } } class B extends A{ constructor(name){ super() this.name = name } } ~~~ * 增加繼承后 ~~~ // 子類原型鏈繼承 function _inherits(subClass, superClass) { // 判讀繼承的父類是不是一個function 或者是 null if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError( 'Super expression must either be null or a function' ) } // 子類原型鏈指向父類原型 subClass.prototype = Object.create(superClass && superClass.prototype, { // 將構造函數改為子類 constructor: { value: subClass, writable: true, configurable: true }, }) Object.defineProperty(subClass, 'prototype', { writable: false }) // 讓子類獲取父類的類方法 if (superClass) _setPrototypeOf(subClass, superClass) } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p return o } return _setPrototypeOf(o, p) } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o) } return _getPrototypeOf(o) } function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === 'object' || typeof call === 'function')) { return call } else if (call !== void 0) { throw new TypeError( 'Derived constructors may only return object or undefined' ) } return _assertThisInitialized(self) } function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct() return function _createSuperInternal() { // 獲取子類的隱式原型 var Super = _getPrototypeOf(Derived), result // _setPrototypeOf 時候已經將父類構造函數全部綁定在子類隱式原型上 // 因此Super 此時就是父類構造函數 if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor result = Reflect.construct(Super, arguments, NewTarget) } else { result = Super.apply(this, arguments) } return _possibleConstructorReturn(this, result) } } var A = /*#__PURE__*/ (function () { function A() { _classCallCheck(this, A) _defineProperty(this, 'name', 1) } _createClass(A, [ { key: 'getName', value: function getName() { return this.name }, }, ]) return A })() var B = /*#__PURE__*/ (function (_A) { // 父子繼承 _inherits(B, _A) // 獲取super var _super = _createSuper(B) function B(name) { var _this // 判讀當前是通過new 創建的而不是方法直接調用 _classCallCheck(this, B) _this = _super.call(this) _this.name = name11 return _this } return _createClass(B) })(A) ~~~