Javascript：扩展一个函数

javascript function extend

2022-08-30 05:42:07

我想要它的主要原因是我想扩展我的初始化函数。

像这样：

// main.js

window.onload = init();
function init(){
     doSomething();
}

// extend.js

function extends init(){
    doSomethingHereToo();
}

所以我想扩展一个函数，就像我在PHP中扩展一个类一样。

我也想从其他文件扩展它，因此例如，我在中有原始的init函数，在.main.jsextended.js

答案 1

有了更广阔的视野来了解你实际想要做的事情以及你正在做的事情的背景，我相信我们可以给你一个比字面上的答案更好的答案。

但这里有一个字面上的答案：

如果要将这些函数分配给某个属性，则可以包装原始函数，并将替换函数放在属性上：

// Original code in main.js
var theProperty = init;

function init(){
     doSomething();
}

// Extending it by replacing and wrapping, in extended.js
theProperty = (function(old) {
    function extendsInit() {
        old();
        doSomething();
    }

    return extendsInit;
})(theProperty);

如果您的函数尚未在对象上，则可能需要将它们放在那里以方便实现上述目的。例如：

// In main.js
var MyLibrary = {
    init: function init() {
    }
};

// In extended.js
(function() {
    var oldInit = MyLibrary.init;
    MyLibrary.init = extendedInit;
    function extendedInit() {
        oldInit.call(MyLibrary); // Use #call in case `init` uses `this`
        doSomething();
    }
})();

但是有更好的方法来做到这一点。例如，提供一种注册函数的方法。init

// In main.js
var MyLibrary = (function() {
    var initFunctions = [];
    return {
        init: function init() {
            var fns = initFunctions;
            initFunctions = undefined;
            for (var index = 0; index < fns.length; ++index) {
                try { fns[index](); } catch (e) { }
            }
        },
        addInitFunction: function addInitFunction(fn) {
            if (initFunctions) {
                // Init hasn't run yet, remember it
                initFunctions.push(fn);
            } else {
                // `init` has already run, call it almost immediately
                // but *asynchronously* (so the caller never sees the
                // call synchronously)
                setTimeout(fn, 0);
            }
        }
    };
})();

在2020年（或者2016年之后的任何时候），可以写得更紧凑一些：

// In main.js
const MyLibrary = (() => {
    let initFunctions = [];
    return {
        init() {
            const fns = initFunctions;
            initFunctions = undefined;
            for (const fn of fns) {
                try { fn(); } catch (e) { }
            }
        },
        addInitFunction(fn) {
            if (initFunctions) {
                // Init hasn't run yet, remember it
                initFunctions.push(fn);
            } else {
                // `init` has already run, call it almost immediately
                // but *asynchronously* (so the caller never sees the
                // call synchronously)
                setTimeout(fn, 0);
                // Or: `Promise.resolve().then(() => fn());`
                // (Not `.then(fn)` just to avoid passing it an argument)
            }
        }
    };
})();

答案 2

有几种方法可以做到这一点，这取决于你的目的是什么，如果你只是想执行函数，并且在同一上下文中，你可以使用.apply（）：

function init(){
  doSomething();
}
function myFunc(){
  init.apply(this, arguments);
  doSomethingHereToo();
}

如果你想用更新的替换它，它看起来像这样：init

function init(){
  doSomething();
}
//anytime later
var old_init = init;
init = function() {
  old_init.apply(this, arguments);
  doSomethingHereToo();
};