如何重载对象中定义的 JavaScript 函数

Question

我已经在函数内的这个对象中定义了一些函数

calculator

，因为我想链接它们。我的目标是重载

addNumber

函数，但我似乎无法正确理解语法。

下面是我想要实现的示例（由于语法错误而不起作用）

const calculator = () => {
    return {
        result: 0,
        addNumber(a: number) : number;
        addNumber(a: number | b: number): number;
        addNumber(a: number | b: string): number {
            // Implementation to add numbers depending on function overload
            return this;
        },

        multiplyNumber(a) {
            this.result = this.result * a;
            return this;
        },

        log() {
             console.log(this.result);
        }
    };
}

// logs 10
calculator().addNumber(10).log();

// logs 25
calculator().addNumber(10,15).log();

// logs 25
calculator().addNumber(10,'15').log();

这是给我这个想法的示例，但是，该函数是正常定义的。有哪些方法可以重载对象中定义的函数？

function makeDate(timestamp: number): Date;
function makeDate(m: number, d: number, y: number): Date;
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
  if (d !== undefined && y !== undefined) {
    return new Date(y, mOrTimestamp, d);
  } else {
    return new Date(mOrTimestamp);
  }
}
const d1 = makeDate(12345678);
const d2 = makeDate(5, 5, 5);
const d3 = makeDate(1, 3);

Answer 1

如果您愿意切换到匿名类，那么重载就非常简单：

const calculator = () => {
    return new class {
        result = 0;

        addNumber(a: number) : this
        addNumber(a: number, b: number): this
        addNumber(a: number, b: string): this
        addNumber(a: number, b?: number | string): this {
            // Implementation to add numbers depending on function overload
            return this;
        }

        multiplyNumber(a: number) {
            this.result = this.result * a;
            return this;
        }

        log() {
             console.log(this.result);
        }
    };
}

游乐场链接

对象字面方法和函数表达式不支持重载。唯一的其他选择是使用带有类型断言的函数表达式：

const calculator = () => {
    return {
        result: 0,

        addNumber : function (a: number, b?: number | string) {
            return this;
        } as {
            <T>(this: T, a: number) : T
            <T>(this: T, a: number, b: number): T
            <T>(this: T, a: number, b: string): T
        }
    };
}

游乐场链接

Answer 2

(() => {
  //array that store functions
    var Funcs = []
     /**
     * @param {function} f overload function
     * @param {string} fname overload function name
   * @param {parameters} vtypes function parameters type descriptor (number,string,object....etc
     */
    overloadFunction = function(f, fname, ...vtypes) {
        var k,l, n = false;
        if (!Funcs.hasOwnProperty(fname)) Funcs[fname] = [];
        Funcs[fname].push([f, vtypes?vtypes: 0 ]);
        window[fname] = function() {
            for (k = 0; k < Funcs[fname].length; k++)
                if (arguments.length == Funcs[fname][k][0].length) {
                    n=true;
                    if (Funcs[fname][k][1]!=0)
                    for(i=0;i<arguments.length;i++)
                    {
                        if(typeof arguments[i]!=Funcs[fname][k][1][i])
                        {
                            n=false;
                        }
                    }
                    if(n) return Funcs[fname][k][0].apply(this, arguments);
                }
        }
    }
})();

//First sum function definition with parameter type descriptors
overloadFunction(function(a,b){return a+b},"sum","number","number")
//Second sum function definition with parameter with parameter type descriptors
overloadFunction(function(a,b){return a+" "+b},"sum","string","string")
//Third sum function definition (not need parameter type descriptors,because no other functions with the same number of parameters
overloadFunction(function(a,b,c){return a+b+c},"sum")

//call first function
console.log(sum(4,2));//return 6
//call second function
console.log(sum("4","2"));//return "4 2"
//call third function
console.log(sum(3,2,5));//return 10
//ETC...