Babel轉(zhuǎn)碼關于 "super" 的注意事項

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

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

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

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

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

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

問題分析

為啥與 chrome 直接運行的結(jié)果不一致呢？想了想問題應該出在 Babel 轉(zhuǎn)碼上。馬上打開轉(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; 對應的是 _set(B.prototype.__proto__ || Object.getPrototypeOf(B.prototype), "x", 3, _this); 這里有個 _set() 函數(shù)，再看下這個 _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;
};

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

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

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

這個 x 屬性定義上還必須定義 set 訪問器

比如像下面這樣：

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)碼那里還有個 _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了

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

GPU云服務器云服務器 Quote quoted quot python b&quot&quot

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96042.html

react項目關于webpack配置修改

一、前言通過CRA腳手架構建的項目，一般webpack配置是隱藏的，如果要修改，就要另外處理。想要修改webpack通常有兩種方式通過插件去增加或覆蓋webpack配置（方法一、方法二）或者釋放項目中的webpack配置，使之可見，然后可以修改（方法三）本來CRA腳手架將webpack等復雜的配置封裝在項目中，后續(xù)可以通過更新react-scripts來體驗版本升級帶來的新特性，但有些時候確實需要...

社區(qū)管理員 2022-10-08 14:54 評論0 收藏0
煦涵說Webpack-IE低版本兼容指南

摘要：，是一個前端資源加載打包工具，現(xiàn)在版本已經(jīng)到，今天的文章不支持介紹的及使用，而是對最近項目開發(fā)中使用打包時處理低版本及以下瀏覽器兼容問題做一次總結(jié)。 Webpack，Webpack 是一個前端資源加載/打包工具，現(xiàn)在版本已經(jīng) release 到 v2.6.1，今天的文章不支持介紹Webpack的API及使用，而是對最近項目開發(fā)中使用Webpack打包時處理IE低版本(IE8及以下)瀏覽...

tanglijun 2019-08-20 16:55 評論0 收藏0
如何使用pandas對超大csv文件進行快速拆分詳解

　　小編寫這篇文章的主要目的，主要是對pandas做一個較為詳細的一個解答，pandas其實就是一個數(shù)據(jù)模型庫，里面的內(nèi)容還是比較的多的，那么，怎么樣對海量的數(shù)據(jù)進行處理呢？處理的內(nèi)容就是對超大的csv文件進行快速拆分，下面就給大家舉例驗證。　　前言　　本文介紹如何利用pandas對超大CSV文件進行快速拆分?！　?.操作步驟　　1.1安裝pandas　　pipinstallpandas　　1.2...

89542767 2022-11-15 13:18 評論0 收藏0
ES6之&quot;let&quot;能替代&quot;var&quot;嗎?

摘要：我們將循環(huán)執(zhí)行五次，每次將一個函數(shù)到數(shù)組中。只有當你理解了，才能給出正確的答案。讀者提到的兩個問題聲明的變量不是完全不可更改。不僅如此，而且有些最新的瀏覽器也還沒有支持。譯者按: 使用let的確會比var安全很多。原文: Why You Shouldn’t Use ‘var’ Anymore 譯者: Fundebug 為了保證可讀性，本文采用意譯而非直譯。我已經(jīng)使用ES2015(...

lewinlee 2019-08-20 16:25 評論0 收藏0