重寫此 JavaScript 類方法的正確方法

Question

當 JavaScript 類方法按照下面的方式設置后，我應該如何最好地覆蓋它。 在這個片段中，如果我想覆蓋另一個 JS 文件中的_other方法，在這個文件之后加載，正確的方法是什么？

 var review = {}; "use strict"; (function ($) { review.list = { _init: function () { // The code I want to leave intact }, _other: function () { // The code I want to override }, init: function () { $(document).ready(function () { review.list._init(); review.list._other(); }); } }; review.list.init(); })(jQuery);

Answer 1

您可以只分配給review.list._other 。 如果您想訪問以前的版本，請先獲取：

var oldOther = review.list._other;
review.list._other = function() {
    // Your new code here, perhaps calling oldOther if you like
    console.log("The new other code ran.");
};

例子：

 // The original file var review = {}; "use strict"; (function($) { review.list = { _init: function() { // The code I want to leave intact }, _other: function() { // The code I want to override }, init: function() { $(document).ready(function() { review.list._init(); review.list._other(); }); } }; review.list.init(); })(jQuery); // Your file after it (function($) { var oldOther = review.list._other; review.list._other = function() { // Your new code here, perhaps calling oldOther if you like console.log("The new other code ran."); }; })(jQuery);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

你真的很幸運它是這樣寫的。 它很容易被寫成這樣你就不能覆蓋_other ......

---

有點跑題了，但你已經在下面問了：

實際上，這種類結構對您來說是否合理？ 嘗試涉足更多的 OOP JS

我不知道你的設計限制，所以對接下來的任何事情都持保留態度......我應該注意到那里根本沒有“類”（無論是在 ES5 和更早的意義上，還是在 ES2015 和更高的意義上），只是一個對象。 （這很好。）但看起來_init和_other是私有的； 它們可以是真正的私有而不是偽私有而不需要任何成本——除非那樣你就無法覆蓋_other ！ :-) 另外，我將允許整體控制代碼確定初始化何時發生，而不是在ready 。 （另外，在純粹的風格注釋上，我根本不同意這種兩個空格縮進的廢話，所以許多 l33t 類型似乎正在推廣。如果您的代碼嵌套如此之深以至於只使用兩個空格作為縮進是必要的，它需要重構；在我看來，四個空格是一個很好的清晰的縮進，不會太大以至於將您的代碼從右側推開。）

所以如果需要 ES5，像這樣：

(function($) {
    var list = {
        init: function() {
            _init();
            _other();
        }
    };

    function _init () {
        // Can use `list` here to refer to the object
    }

    function _other() {
        // Can use `list` here to refer to the object
    }

    review.list = list;

})(jQuery);

...但同樣，這使得覆蓋_other成為不可能（好吧，不合理）。

或者，如果 ES2015 及更高版本沒問題（對於這么短的代碼，差異很小）：

(function($) {
    let list = {
        init() {
            _init();
            _other();
        }
    };

    function _init () {
        // Can use `list` here to refer to the object
    }

    function _other() {
        // Can use `list` here to refer to the object
    }

    review.list = list;

})(jQuery);

Answer 2

只需在下面添加您的新覆蓋......它會起作用......

 var review = {}; "use strict"; (function($) { review.list = { _init: function() { console.log('I\\'m init') }, _other: function() { //This original will be overridden console.log('Original') }, init: function() { $(document).ready(function() { review.list._init(); review.list._other(); }); } }; review.list.init(); })(jQuery); review.list._other = function() { console.log('overridden') }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>