但是..

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

我从来没有看到任何面向对象的语言以你的方式工作，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 2

我仍然不知道你在寻找什么，但似乎要么

继承

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 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方法时，它将更改酒吧的产值。

类/模块类中的ES6类

3 个答案:

但是..

继承

组合物