class和extend · 前端筆記

[TOC] # class ~~~ class Parent{ constructor(name,age){ this.name = name this.age = age } //類公有方法 sayName(){ console.log(this.name) } //靜態方法 static sayhi(){ console.log(this.name) } } ~~~ ~~~ //經過babel官網轉義后 var Parent = /*#__PURE__*/function () { function Parent(name, age) { _classCallCheck(this, Parent); this.name = name; this.age = age; } _createClass(Parent, [{ key: "sayName", value: function sayName() { console.log(this.name); } }], [{ key: "sayhi", value: function sayhi() { console.log(this.name); } }]); return Parent; }(); ~~~ 原理 1.從轉義的結果來看，class的constructor本質上還是構造函數 2.首先通過\_classCallCheck 來檢測是否是new，而不是直接執行構造函數，在es5中是可以直接運行構造函數的，我們看下這個函數： ~~~ function _classCallCheck(instance, Constructor) { if (! instance instanceof Constructor) { throw new TypeError("Cannot call a class as a function"); } } ~~~ 這里我們可以看出，如果你是直接執行的，那么你的這個this就是undefined,因為是嚴格模式，如果是非嚴格模式則是window對象 ,所以 this instanceof Parent,那肯定是false,就會報錯，如果是通過new,那么this是Parent的一個對象, 這時候 this instanceof Parent 就是true，就會執行構造函數 3.而靜態方法和類公有方法則是通過\_createClass方法添加 ~~~ 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; } ~~~ \_createClass第一個參數是構造函數，第二個是共有方法數組，被轉成了有key和value兩個屬性的對象，第三個就是靜態方法，結構和第二個參數一致將共有的方法添加到原型對象上Parent.prototype，將靜態的方法直接添加到構造函數上，這樣就可以直接通過函數名點的形式調用方法 4.最后一步將新的函數返回 # class繼承 ~~~ //轉義前 class Parent{ constructor(name,age){ this.name = name this.age = age } sayName(){ console.log(this.name) } static sayhi(){ console.log(this.name) } } class Child extends Parent{ constructor(name,age){ super() } sayName(){ console.log(this.name) } } //轉義后 var Parent = /*#__PURE__*/function () { function Parent(name, age) { _classCallCheck(this, Parent); this.name = name; this.age = age; } _createClass(Parent, [{ key: "sayName", value: function sayName() { console.log(this.name); } }], [{ key: "sayhi", value: function sayhi() { console.log(this.name); } }]); return Parent; }(); var Child = /*#__PURE__*/function (_Parent) { //將子類構造函數的prototype指向父類構造函數的prototype //將父構造函數指向子構造函數的_proto_ _inherits(Child, _Parent); var _super = _createSuper(Child); function Child(name, age) { _classCallCheck(this, Child); return _super.call(this); } _createClass(Child, [{ key: "sayName", value: function sayName() { console.log(this.name); } }]); return Child; }(Parent); ~~~ parent部分和上方是一樣的，主要講講Child部分 1.用一個閉包保存父類引用，在閉包內部做子類構造邏輯 2.之后執行的是\_inherits方法，它其實就是將子類構造函數的prototype指向父類構造函數的prototype，以及將父構造函數指向子構造函數的\_proto\_ 看代碼： ~~~ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } //這里將子類原型對象的constructor 賦值了子類構造函數本身（之后調用super會有用） subClass.prototype = Object.create(superClass && superClass.prototype,{ constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); //子類構造函數的__proto__指向了父類構造函數（之后調用super會有用） } ~~~ \_inherits先是校驗父構造函數,是不是一個函數和null，然后用父類構造函數的proptype創建一個空對象，并將這個對象指向子類構造函數的proptype，將子類原型對象的constructor指向子類構造函數本身 3.緊接著執行var \_super = \_createSuper(Child); 這個是干嘛的呢，這個就是之后為之后執行super，子類繼承父類屬性做準備 ~~~ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); //相當于 // result = Object.create(NewTarget) // Super.apply(NewTarget, arguments) } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } ~~~ 這個函數返回的是用于一個繼承父類內部屬性一個函數\_isNativeReflectConstruct就是看你支不支持Reflect，Proxy，如果判斷之后不支持就會降級使用apply，來繼承父類的內部屬性和方法一切準備就緒之后，當你創建Child的實例的時候，super()被轉義成了\_super.call(this); 我就當hasNativeReflectConstruct為true，最終執行的就是 ~~~ result = Reflect.construct(Super, arguments, NewTarget); ~~~ Super = \_getPrototypeOf(Derived), \_getPrototypeOf其實就是Object.getPrototypeOf(Derived),Derived是之前傳的子類構造函數，Super最終就是Child.\_*proto,而這個在上面第二步時候，子類構造函數的\_\_proto已經指向了父類構造函數*，所以Super就是父類構造函數 NewTarget =\_getPrototypeOf(this).constructor;這個也是第二步父類構造函數的proptype創建一個空對象，已經將子類原型對象的constructor指向子類構造函數本身，所以NewTarget是子類構造函數那么result就相當于 ~~~ result = Object.create(NewTarget) Super.apply(NewTarget, arguments) ~~~ 這個不就是創建一個對象來繼承父類的內部屬性和方法，就達到了子類構造函數中調用父類構造函數的目的，新創建的Child實例就會動態擁有父類的內部屬性和方法 Class其實就是 es6 給我們提供了一個“組合寄生繼承”的簡單寫法 # 參考資料 [# 知識體系：理解es6 class構造以及繼承的底層實現原理](https://blog.csdn.net/qq_40353716/article/details/106650468)