巧用原型链与闭包，打破JS无重载之说

前端

2023-11-27 23:36:42

JS中为何没有重载？

在回答如何实现 JS 重载之前，我们先来了解一下为何 JS 中没有内置的重载机制。

JS 作为一门弱类型语言，它在函数调用时并不关心参数的类型。这与 Java 等强类型语言不同，后者在函数调用时会严格检查参数的类型是否与函数签名一致。

由于 JS 的弱类型特性，在函数重载的情况下，JS 无法确定应该调用哪个函数。这使得 JS 难以提供内置的重载机制。

2. 通过原型链实现JS重载

虽然 JS 没有内置的重载机制，但我们可以通过原型链来模拟出重载的效果。原型链是 JS 中实现继承的重要机制，它允许我们通过一个对象访问另一个对象的属性和方法。

我们可以利用原型链来为函数创建不同的重载版本。具体做法如下：

定义一个父函数，并将所有重载版本作为其方法。
为每个重载版本定义不同的参数列表。
在父函数中，根据不同的参数列表调用不同的重载版本。

以下是一个简单的例子：

function Shape() { }

Shape.prototype.draw = function() {
  console.log('Drawing a shape');
};

Shape.prototype.drawCircle = function(radius) {
  console.log('Drawing a circle with radius:', radius);
};

Shape.prototype.drawSquare = function(sideLength) {
  console.log('Drawing a square with side length:', sideLength);
};

const shape = new Shape();
shape.draw(); // 输出: Drawing a shape
shape.drawCircle(5); // 输出: Drawing a circle with radius: 5
shape.drawSquare(10); // 输出: Drawing a square with side length: 10

在这个例子中，Shape 类定义了一个父函数 draw 和两个重载版本 drawCircle 和 drawSquare。当调用父函数 draw 时，根据传入的参数列表，会调用不同的重载版本。

3. 通过闭包实现JS重载

除了原型链，我们还可以通过闭包来实现 JS 重载。闭包是一种将函数及其周围状态（包括局部变量）打包在一起的机制，从而使函数能够访问这些状态，即使函数已经执行完毕并返回。

我们可以利用闭包来为函数创建不同的重载版本。具体做法如下：

定义一个函数，并将所有重载版本作为其内部函数。
为每个重载版本定义不同的参数列表。
在父函数中，根据不同的参数列表调用不同的重载版本。

以下是一个简单的例子：

function Shape() {
  const draw = function() {
    console.log('Drawing a shape');
  };

  const drawCircle = function(radius) {
    console.log('Drawing a circle with radius:', radius);
  };

  const drawSquare = function(sideLength) {
    console.log('Drawing a square with side length:', sideLength);
  };

  return {
    draw: draw,
    drawCircle: drawCircle,
    drawSquare: drawSquare
  };
}

const shape = Shape();
shape.draw(); // 输出: Drawing a shape
shape.drawCircle(5); // 输出: Drawing a circle with radius: 5
shape.drawSquare(10); // 输出: Drawing a square with side length: 10