为什么 JavaScript ES6 不支持多构造函数类？

Question

我想像下面这样编写我的 Javascript 类。

class Option {
    constructor() {
        this.autoLoad = false;
    }

    constructor(key, value) {
        this[key] = value;
    }

    constructor(key, value, autoLoad) {
        this[key] = value;
        this.autoLoad = autoLoad || false;
    }
}

如果我们能以这种方式写出类，我认为会很好。 预计会发生：

var option1 = new Option(); // option1 = {autoLoad: false}
var option2 = new Option('foo', 'bar',); // option2 = {foo: 'bar'}
var option3 = new Option('foo', 'bar', false); // option3 = {foo: 'bar', autoLoad: false}

Answer 1

我想像下面这样编写我的 Javascript 类

你不能，就像你不能重载那样的标准函数一样。您可以做的是使用arguments 对象来查询传递的参数数量：

class Option {
    constructor(key, value, autoLoad) {
        // new Option()
        if(!arguments.length) {
            this.autoLoad = false;
        }
        // new Option(a, [b, [c]])
        else {
            this[key] = value;
            this.autoLoad = autoLoad || false;
        }
    }
}

Babel REPL Example

当然（使用您更新的示例），您可以采用您不关心参数数量的方法，而不是每个单独的值是否被传递，在这种情况下，您可以这样做类似：

class Option {
    constructor(key, value, autoLoad) {
        if(!key) { // Could change this to a strict undefined check
            this.autoLoad = false;
            return;
        }
        this[key] = value;
        this.autoLoad = autoLoad || false;
    }
}

Answer 2

您想要的称为构造函数重载。 ECMAScript 不支持这种情况，以及更一般的 function overloading 情况。

ECMAScript 处理缺失参数的方式与更严格的语言不同。缺少参数的值保留为undefined，而不是引发错误。在这种范式中，很难/不可能检测到您的目标是哪个重载函数。

惯用的解决方案是拥有一个函数并让它处理您需要的所有参数组合。对于原始示例，您可以像这样测试key 和value 的存在：

class Option {
  constructor(key, value, autoLoad = false) {
    if (typeof key !== 'undefined') {
      this[key] = value;
    }
    this.autoLoad = autoLoad;
  }
}

Answer 3

另一种选择是允许您的构造函数采用绑定到您的类属性的对象：

class Option {
  // Assign default values in the constructor object 
  constructor({key = 'foo', value, autoLoad = true} = {}) {
      this.key = key;
      // Or on the property with default (not recommended)
      this.value = value || 'bar';
      this.autoLoad = autoLoad;
      
      console.log('Result:', this);
  }
}

var option1 = new Option();
// Logs: {key: "foo", value: "bar", autoLoad: true}

var option2 = new Option({value: 'hello'});
// Logs: {key: "foo", value: "hello", autoLoad: true}

这对 Typescript 更有用，因为您可以使用传入的值确保类型安全（即 key 只能是字符串，autoLoad 只能是布尔值等）。

Answer 4

从您的示例代码中猜测，您所需要的只是为您的参数使用默认值：

class Option {
    constructor(key = 'foo', value = 'bar', autoLoad = false) {
        this[key] = value;
        this.autoLoad = autoLoad;
    }
}

话虽如此，构造函数重载的另一种替代方法是使用静态工厂。假设您希望能够从普通参数、包含相同参数的哈希甚至 JSON 字符串实例化一个对象：

class Thing {
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }

    static fromHash(hash) {
        return new this(hash.a, hash.b);
    }

    static fromJson(string) {
        return this.fromHash(JSON.parse(string));
    }
}

let thing = new Thing(1, 2);
// ...
thing = Thing.fromHash({a: 1, b: 2});
// ...
thing = Thing.fromJson('{"a": 1, "b": 2}');

Answer 5

这是一个基于 arity（参数数量）的重载技巧。这个想法是从许多具有不同属性的函数中创建一个函数（通过查看fn.length 来确定）。

function overloaded(...inputs) {
  var fns = [];

  inputs.forEach(f => fns[f.length] = f);

  return function() {
    return fns[arguments.length].apply(this, arguments);
  };
}

var F = overloaded(
  function(a)    { console.log("function with one argument"); },
  function(a, b) { console.log("function with two arguments"); }
);

F(1);
F(2, 3);

当然，这需要大量的防弹和清理工作，但你明白了。但是，我认为将其应用于 ES6 类构造函数不会有太大的运气，因为它们是不同颜色的马。

Answer 6

你可以使用静态方法，看my answer to same question

class MyClass {
    constructor(a,b,c,d){
        this.a = a
        this.b = b
        this.c = c
        this.d = d
    }
    static BAndCInstance(b,c){
        return new MyClass(null,b,c)
    }
}

//a Instance that has b and c params
MyClass.BAndCInstance(b,c)

Answer 7

使用 object.assigne 与 this 的参数

This={...this,...arguments}

Answer 8

这不是我想要的重载，但这是我如何通过创建具有一些不同初始化行为的 obj1 来伪造我的方式的基本版本。我意识到我可以扩展上述论点，但我已经有一组令人讨厌的论点和相对不同的数据源需要解构，这会真正扭曲我的目标；这只是让我的情况更干净......

class obj1{
  constructor(v1, v2){
    this.a = v1;
    this.b = v2;
  }
}

class obj1Alt{
  constructor(v1, v2){
    return new obj1(v1*2,v2*2);
  }
}

new obj1(2,4) // returns an obj1
new obj1Alt(2,4) // also returns an obj1

免责声明：我已经编程了很长时间，但是我对 JS 还很陌生；可能不是最佳做法。