类/模块类中的ES6类

Question

我想要创建一个模块化的类。它应该可以像下面的例子一样使用，并且应该可以分离成文件。子类(Tasks)应该可以访问父类(Foo)的方法。

// Use basic methods
const foo = new Foo();
foo.connect();
foo.authenticate('user', 'password');

// Use task (or any other) module 
const tasks = foo.Tasks;
tasks.createTask('ask on stackoverflow');
tasks.updateTask({ done: true });

我只做了下面的工作。但是，由于我必须使用Bar关键字启动一个新的new实例，所以无法访问更改后的this.output值。如何省略new关键字，并使用上面所需的语法与foo使用相同的实例？

​

const Foo = class Foo {
  constructor() {
    this.output = 1;
  }

  changeOutput(output) {
    this.output = output;
  }
}

Foo.Bar = class Bar extends Foo {
  getOutput() {
    return this.output;
  }
}

const foo = new Foo();
foo.changeOutput(2);

const bar = new Foo.Bar(); // Creates a new instance what is wrong, but foo.Bar() or anything else doesn't work (Error: is not a function).
console.log(bar.getOutput()); // Result is 1, but should be 2

​

Answer 1

我还是不知道你在找什么，但似乎

继承

class Foo {
  constructor() {
    this.output = 1;
  }
  changeOutput(output) {
    this.output = output;
  }
}

class Bar extends Foo {
  getOutput() {
    return this.output;
  }
}

const x = new Bar();
x.changeOutput(2);
console.log(x.getOutput());

或

作文

class Foo {
  constructor() {
    this.output = 1;
    this.bar = new (new.target).Bar(this);
  }
  changeOutput(output) {
    this.output = output;
  }
}

Foo.Bar = class Bar {
  constructor(foo) {
    this.foo = foo;
  }
  getOutput() {
    return this.foo.output;
  }
}

const foo = new Foo();
foo.changeOutput(2);

const bar = foo.bar;
console.log(bar.getOutput());

Answer 2

我从未见过任何面向对象的语言以您正在尝试的方式工作，javascript也是如此。

Foo.Bar是Foo上的一个静态方法，即扩展类Foo，而不是实例foo。这就是为什么你有数字1出现。

分离您的关注点，并将更改应用于正在使用的实例，即具有任务的实例。

class Bar extends Foo {
  getOutput() {
    return this.output;
  }
}
var bar = new Bar();
bar.changeOutput(2)
bar.getOutput() //2

但是..。

您可以编辑this的绑定以实现您想要的结果，但首先遵循糟糕的OOP设计模式并不是一个好的实践(您可以通过其他范例或将这两个类合并在一起来实现您想要的结果)。

​

const Foo = class Foo {
  constructor() {
    this.output = 1;
  }

  changeOutput(output) {
    this.output = output;
  }
}

Foo.Bar = class Bar extends Foo {
  getOutput() {
    return this.output;
  }
}

const foo = new Foo();
foo.changeOutput(2);

const bar = new Foo.Bar();

console.log(bar.getOutput.call(foo)); // Result is 2 now

​

Answer 3

class Foo {
  constructor() {
    this.output = 1;
  }

  changeOutput(output) {
    this.output = output;
  }
}

class Bar extends Foo {
  getOutput() {
    return this.output;
  }
}

const foo = new Foo();
foo.changeOutput(2);

const bar = new Bar(); 
bar.changeOutput(2);

console.log(bar.getOutput()); //

当您创建子实例时，Bar将调用Foo的构造函数并将输出值初始化为1，当您调用getOutput方法时，它将更改bar的输出值。