代码之家  ›  专栏  ›  技术社区  ›  Flame_Phoenix

如何在JavaScript ECMA6中重载构造函数?[副本]

  •  29
  • Flame_Phoenix  · 技术社区  · 8 年前

    客观的

    在JavaScript ECMA6中实现允许构造函数重载的机制

    为什么这不是副本

    Why doesn't JavaScript ES6 support multi-constructor classes? 古老的

    出身背景

    我有一个带有给定构造函数的JavaScript类,我希望用户在实例化对象时能够有不同的构造函数。我假设的一个例子如下:

    const DEFAULT_WHEEL_NUMBER = 4;
    const DEFAULT_COLOR = "black";    
    const DEFAULT_NAME = "myCar";
    
    class Car{
    
        constructor(numberWheels, aName, aColor){
            this.wheelsNum = numberWheels;
            this.name = aName;
            this.color = aColor;
        }
    
        constructor(aName){
            this(DEFUALT_WHEEL_NUMBER, aName, DEFAULT_COLOR);
        }
    
        constructor(){
            this(DEFUALT_WHEEL_NUMBER, DEFAULT_NAME, DEFAULT_COLOR);
        }
    }
    

    在这段代码中,用户有三个可以使用的构造函数,每个构造函数使用不同数量的参数。使用示例如下:

    var car1 = new Car(3, "tricicle-car", "white");
    var car2 = new Car("Opel"); //creates black car with 4 wheels called Opel
    var car3 = new Car(); //creates a black car, with 4 wheels called myCar
    

    问题

    如果使用Java或C#,这是一个简单的例子,因为这些语言有构造函数重载。

    然而,从 documentation on classes from MDN 可以得出结论,JavaScript没有。

    1. 有没有办法使用ECMA6为JavaScript类实现类似的机制?如果不是,最好/最接近的替代方案是什么?
    2 回复  |  直到 7 年前
        1
  •  23
  •   meskobalazs    8 年前

    JavaScript中没有内置的解决方案。另一种解决方案是使用 arguments 对象,或传递您自己的配置选项,类似于:

    const defaults = {
        numberWheels: 4,
        color: "black",   
        name: "myCar"
    }
    
    class Car {
        constructor(options) {
             this.wheelsNum = options.numberWheels || defaults.numberWheels;
             this.name = options.name || defaults.name;
             this.color = options.color || defaults.color;
        }
    }
    

    这基本上是老派的解决方案,我在ES3中使用相同的逻辑。

        2
  •  21
  •   Joe Clay    8 年前

    default parameters

    class Car {
        constructor(numberWheels = 4, aName = "myCar", aColor = "black"){
            this.wheelsNum = numberWheels;
            this.name = aName;
            this.color = aColor;
        }
    }
    

    很明显,这需要注意,不能像示例中那样使用不同参数顺序的“重载”(尽管在我看来,这是一件好事——使用一致的API更好)。

    meskobalazs的答案也是一个很好的选择,特别是如果你有很多选项想让你的对象接受的话。通过这样的函数参数执行此操作可能会有点混乱!