ES6篇

---

一段符合ES6語法的代碼

class a{constructor(y,z){this.y =y;this.z =z;}render(){console.log(1)}}class b extends a{constructor(m,n){super();this.m=m;this.n=n;}render(){console.log(2);}}

我在babel官網上輸入，查看轉碼(),代碼長很多，從中找出關鍵點：

• class

• constructor

• extend

• super

class

---

聲明class class a(){}
查看對應轉碼 var a = function(){return a}()
可以看出聲明一個class就是通過創建并執行一個匿名函數，在這個匿名函數中聲明function a,最后返回a。

constructor

---

constructor(y,z){this.y =y;this.z =z;}

對應轉碼:

function a(y, z) {_classCallCheck(this, a);this.y = y;this.z = z;}

將_classCallCheck(this,a)提出

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function");} }

這個方面即是判斷this的[[prototype]]是否有指向a.prototype的對象。即是判斷原本是不是有a這個function。？？感覺解釋的不好。
然后再在a(本質是function，但可以被稱作class)中聲明屬性y，z。
接下來，在class a中有一個render方法，

_createClass(a, [{key: "render",value: function render() {console.log(1);} }]);

通過_createClass方法，可以給a添加render方法。

將_createClass提出來看。

var _createClass = 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);//給target添加屬性} }// 返回函數return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();//立即執行

由上推斷es6給class添加的屬性、方法背后是es5對給對象添加屬性的方法。

extend

---

同樣再轉碼中，找到了對應的_inherits(b, _a)

function _inherits(subClass, superClass) { // 確保superClass為functionif (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);} // subClass.prototype的[[prototype]]關聯到superClass superClass.prototype// 給subClass添加constructor這個屬性subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });// 設置subclass的內置[[prototype]]與superClass相關聯if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

可以看出extend背后是通過js的原型鏈實現的。
其中在class b extends a中要將a傳入b中。

super

---

其中對應的轉碼：

function b(m, n) {_classCallCheck(this, b);var _this = _possibleConstructorReturn(this, (b.__proto__ || Object.getPrototypeOf(b)).call(this));_this.m = m;_this.n = n;return _this;}

其中_possibleConstructorReturn實現了super的原理。

function _possibleConstructorReturn(self, call) {if (!self) {throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } //顯示綁定b的內置[[prototype]]到this，即在b中執行b原型鏈上關聯的屬性。return call && (typeof call === "object" || typeof call === "function") ? call : self; }

總結

以上是生活随笔為你收集整理的ES6—类的实现原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。