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官網(wǎng)上輸入，查看轉(zhuǎn)碼(),代碼長(zhǎng)很多，從中找出關(guān)鍵點(diǎn)：

• class

• constructor

• extend

• super

class

---

聲明class class a(){}
查看對(duì)應(yīng)轉(zhuǎn)碼 var a = function(){return a}()
可以看出聲明一個(gè)class就是通過創(chuàng)建并執(zhí)行一個(gè)匿名函數(shù)，在這個(gè)匿名函數(shù)中聲明function a,最后返回a。

constructor

---

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

對(duì)應(yīng)轉(zhuǎn)碼:

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");} }

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

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

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

將_createClass提出來看。

var _createClass = function () { // 給對(duì)象添加屬性function defineProperties(target, props) {for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; //默認(rèn)不可枚舉descriptor.configurable = true;//可配置修改屬性if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);//給target添加屬性} }// 返回函數(shù)return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();//立即執(zhí)行

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

extend

---

同樣再轉(zhuǎn)碼中，找到了對(duì)應(yīng)的_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]]關(guān)聯(lián)到superClass superClass.prototype// 給subClass添加constructor這個(gè)屬性subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });// 設(shè)置subclass的內(nèi)置[[prototype]]與superClass相關(guān)聯(lián)if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

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

super

---

其中對(duì)應(yīng)的轉(zhuǎn)碼：

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實(shí)現(xiàn)了super的原理。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。