Babel轉(zhuǎn)碼關(guān)于 "super" 的注意事項(xiàng)

rose 發(fā)布于2019-08-22 18:39 / 1274人閱讀

摘要：事情的起因是在問(wèn)答上看到一個(gè)朋友的提問(wèn)，問(wèn)的是阮一峰老師入門(mén)上關(guān)于關(guān)鍵字的一段代碼問(wèn)題，下面是這個(gè)代碼的截圖這位樓主說(shuō)他覺(jué)得的值不是，下面有網(wǎng)友說(shuō)把代碼粘貼到控制臺(tái)一試就是這結(jié)果沒(méi)錯(cuò)，后來(lái)樓主說(shuō)是他想錯(cuò)了。

事情的起因是在問(wèn)答上看到一個(gè)朋友的提問(wèn)，問(wèn)的是阮一峰老師 ECMAScript 6 入門(mén) 上關(guān)于super關(guān)鍵字的一段代碼問(wèn)題，下面是這個(gè)代碼的截圖：

這位樓主說(shuō)他覺(jué)得 this.x 的值不是3，下面有網(wǎng)友說(shuō)把代碼粘貼到 chrome 控制臺(tái)一試就是這結(jié)果沒(méi)錯(cuò)，后來(lái)樓主說(shuō)是他想錯(cuò)了。我也順便把代碼粘貼到 chome 下執(zhí)行后答案也確實(shí)是3。

本來(lái)這個(gè)事沒(méi)啥就結(jié)束了，正好我開(kāi)著 WebStorm 準(zhǔn)備寫(xiě)代碼，順手粘貼到代碼文件里面，保存 > webpack打包 > 刷新瀏覽器，瞅了一眼 Console：

！這是神馬情況，輸出竟然是2！

問(wèn)題分析

為啥與 chrome 直接運(yùn)行的結(jié)果不一致呢？想了想問(wèn)題應(yīng)該出在 Babel 轉(zhuǎn)碼上。馬上打開(kāi)轉(zhuǎn)碼后的文件，定位到這段代碼的位置：

var B = function (_A) {
    _inherits(B, _A);

    function B() {
        _classCallCheck(this, B);

        var _this = _possibleConstructorReturn(this, (B.__proto__ || Object.getPrototypeOf(B)).call(this));

        _this.x = 2;
        _set(B.prototype.__proto__ || Object.getPrototypeOf(B.prototype), "x", 3, _this);
        console.log(_get(B.prototype.__proto__ || Object.getPrototypeOf(B.prototype), "x", _this)); // undefined
        console.log(_this.x); // 3
        return _this;
    }

    return B;
}(A);

super.x = 3; 對(duì)應(yīng)的是 _set(B.prototype.__proto__ || Object.getPrototypeOf(B.prototype), "x", 3, _this); 這里有個(gè) _set() 函數(shù)，再看下這個(gè) _set() 是啥：

var _set = function set(object, property, value, receiver) {
    var desc = Object.getOwnPropertyDescriptor(object, property);
    if (desc === undefined) {
        var parent = Object.getPrototypeOf(object);
        if (parent !== null) {
            set(parent, property, value, receiver);
        }
    } else if ("value" in desc && desc.writable) {
        desc.value = value;
    } else {
        var setter = desc.set;
        if (setter !== undefined) {
            setter.call(receiver, value);
        }
    }
    return value;
};

仔細(xì)看看這個(gè)函數(shù)后，明白是怎么回事了。結(jié)合阮一峰老師的代碼和上面的轉(zhuǎn)碼可以看出，_set() 傳進(jìn)來(lái)的第一個(gè)參數(shù)是 B.prototype.__proto__ -- 也就是A的原型對(duì)象 -- A.prototype，第一句代碼會(huì)先找 x屬性 的描述符，如果找不到繼續(xù)順著原型鏈找... 當(dāng)然是找不到的了，所以相當(dāng)于啥也沒(méi)執(zhí)行，this.x 的值依然是2。

如果按照這個(gè) _set() 函數(shù)的邏輯，在什么情況下 this.x 的值才會(huì)是3呢？要滿足兩個(gè)條件：

A.prototype 上必須有 x 屬性定義

這個(gè) x 屬性定義上還必須定義 set 訪問(wèn)器

比如像下面這樣：

Object.defineProperty(A.prototype, "x", {
    get: function () {
        return this._x;
    },
    set: function (value) {
        this._x = value;
    }
});

然后再跑一把，果然 this.x 的值是3了！等一下... 怎么 console.log(super.x); // undefined 這句的結(jié)果不是 undefined 也是3了呢？看下轉(zhuǎn)碼那里還有個(gè) _get() 函數(shù)：

var _get = function get(object, property, receiver) {
    if (object === null) object = Function.prototype;
    var desc = Object.getOwnPropertyDescriptor(object, property);
    if (desc === undefined) {
        var parent = Object.getPrototypeOf(object);
        if (parent === null) {
            return undefined;
        } else {
            return get(parent, property, receiver);
        }
    } else if ("value" in desc) {
        return desc.value;
    } else {
        var getter = desc.get;
        if (getter === undefined) {
            return undefined;
        }
        return getter.call(receiver);
    }
};

好吧，代碼走到最后 else 的 getter 那里了，自然 super.x 的讀取結(jié)果就是3了

目前還沒(méi)時(shí)間看為啥 Babel 要這么轉(zhuǎn)碼處理，如果你有答案了歡迎留言討論。