JS-ES5模擬super與多級繼承(二)

yearsj 發布于2019-08-22 14:04 / 2201人閱讀

摘要：參考文章官網是一個的編譯器它可以將的代碼轉換成等價的我們看看它是怎么模擬關鍵字的與上面等價的語句如下貌似不支持多重繼承啊覆寫子類的對象設置隱式原型感覺這樣很怪因為這樣意為著子類將成為父類的實例對象呃類似的概念但我不覺得父子類關系與類和實

參考文章

Babel官網

babel是一個es6->es5的編譯器, 它可以將es6的代碼轉換成等價的es5.

我們看看它是怎么模擬super關鍵字的.

class A{
    constructor(){
    }
    render(){
        console.log(1)
    }
}

class B extends A{
    constructor(){
        super();
    }
    render(){
        super.render();
        console.log(2);
    }
}

與上面es6等價的es5語句如下

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

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); 
        } 
    } 
    return function (Constructor, protoProps, staticProps) { 
        if (protoProps) defineProperties(Constructor.prototype, protoProps); 
        if (staticProps) defineProperties(Constructor, staticProps); 
        return Constructor; 
    }; 
}();

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn"t been initialised - super() hasn"t been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

// 貌似不支持多重繼承啊.
function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) { 
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 
    } 
    // 覆寫子類的prototype對象
    subClass.prototype = Object.create(superClass && superClass.prototype, { 
        constructor: { 
            value: subClass, 
            enumerable: false, 
            writable: true, 
            configurable: true 
        } 
    }); 
    // 設置隱式原型, 感覺這樣很怪. 因為這樣意為著子類將成為父類的實例對象...呃, 類似的概念
    // 但我不覺得父子類關系與類和實例的關系一樣...
    if (superClass) 
        Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 
}

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

var A = function () {
    function A() {
        // 檢查當前this對象是否為A的實例, 如果不是說明是當成函數直接用的...
        _classCallCheck(this, A);
    }
    // 創建類屬性
    _createClass(A, [{
        key: "render",
        value: function render() {
            console.log(1);
        }
    }]);

    return A;
}();

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

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

        return _possibleConstructorReturn(this, (B.__proto__ || Object.getPrototypeOf(B)).call(this));
    }
    // 原型方法中取到了構造函數類本身, 感覺這樣耦合性比較大
    // 這是直接到`B.prototype.__proto__`指向的原型鏈上尋找目標方法, 
    // 但我不想每次在寫子類方法時還要顯示寫父類變量.
    _createClass(B, [{
        key: "render",
        value: function render() {
            _get(B.prototype.__proto__ || Object.getPrototypeOf(B.prototype), "render", this).call(this);
            console.log(2);
        }
    }]);

    return B;
}(A);

但這種轉換并不是我想要的那種, 因為它的super實現實際上是在子類方法中通過顯式調用父類名.父類方法的形式完成的, 作為編譯結果, 它可以隱藏實際代碼編寫時的耦合性, 但直接寫es5的語法時, 顯示指定要調用的父類名稱依然不能說是一種好的解決方案.

GPU云服務器云服務器繼承模擬模擬類繼承繼承與多態 python類與繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92834.html

JS-ES5模擬super與多級繼承(一)

摘要：參考文章多層繼承方法本系列文章對實現多級繼承做一個學習和探究第三篇給出最終的模擬代碼及測試用例簡單的父子繼承父類子類原型鏈繼承這里我用了關鍵字表示了繼承的父類方法可以將其附加到子類實例對象上用起來會方便一點但是比較致命的一點是這種方式不適參考文章 js多層繼承 super方法本系列文章對js es5實現多級繼承做一個學習和探究, 第三篇給出最終的模擬代碼及測試用例. 簡單的父-子繼...

李世贊 2019-08-22 14:04 評論0 收藏0
JS-ES5模擬super與多級繼承(三)

摘要：參考文章多層繼承方法參考文章中提供了一個思路不一定要是一個變量也可以是一個函數只要它能返回我們期望的父級對象就可以了下面是我對它給出的源碼的一些修改和注釋另外有個測試示例要想擁有方法必須繼承類注意方法中不要再在時為子類添加指向父類本身的屬參考文章 js多層繼承 super方法參考文章1中提供了一個思路, _super不一定要是一個變量, 也可以是一個函數, 只要它能返回我們期望的父...

VioletJack 2019-08-22 14:06 評論0 收藏0
javascript之模擬類繼承

摘要：歡迎關注我的博客正文讓我來構造函數其實，模擬一個類的方式非常的簡單構造函數。我們先來看一個例子這里通過構造函數模擬出來的類，其實和其他語言的類行為上是基本一致的，唯一的區別就是它不具備私有方法。前言 ES6時代的來臨，使得類繼承變得如此的圓滑。但是，你有思考過ES6的類繼承模式嗎？如何去實現它呢？類繼承對于JavaScript來說，實現方式與Java等類語言大不相同。熟悉JavaS...

Jochen 2019-08-22 11:07 評論0 收藏0
ES6—class與面向對象編程（8）

摘要：接下來我們看下類的寫法，這個就很接近于傳統面向對象語言了。如果你想了解傳統面向對象語言，這里是一個好切入點。作為對象時，指向父類的原型對象。這些就是為將來在中支持面向對象的類機制而預留的。在ES5中，我們經常使用方法或者對象去模擬類的使用，并基于原型實現繼承，雖然可以實現功能，但是代碼并不優雅，很多人還是傾向于用 class 來組織代碼，很多類庫、框架創造了自己的 API 來實現 c...

wangjuntytl 2019-08-26 18:27 評論0 收藏0
超級白中白的學習進程（2）：繼承（Extends）

摘要：父類中的訪問權限一定要小于或者等于子類訪問權限的個關鍵字訪問權限大小，其中為默認值，不用寫。下面是一個典型的代碼父類代碼子類代碼測試類代碼輸出結果在子類那里已經表明。繼承（Extends）1、前言還是先說一下博主本人的一些基本情況吧。本人去年剛剛畢業，專業是電氣工程及其自動化，就是在大學期間完全沒有接觸過JAVA，也就稍稍了解了一下C語言。后來找了現在的工作也是和編程沒有任何關系，是...

pkwenda 2019-08-16 17:18 評論0 收藏0