Question

基本上我想在First.showName类的上下文中使用Second类的方法，但不知道如何访问它。

 class First {
        constructor(){
            this.elem = document.createElement("br");
        }
        showName = function (){
            console.log('Name of the node:',this.elem.nodeName);
        }
    }

class Second  {
    constructor(){
        this.elem = document.createElement("div");
    }
    showName = First.showName.bind(this); // error!
    showName = First.prototype.showName.bind(this); // error!
    showName = First.__proto__.showName.bind(this); // error!
}

window.testObject = new Second();
testObject.showName();

Answer 1

现在暂时将element部分放在一边，仅关注JavaScript。

您的头等舱有一种方法。但是JavaScript中的类只是原型上的语法糖。所以：

class First {
  showName() { console.log(this.name); }
}

与以下相同：

function First() {
}

First.prototype.showName = function() { console.log(this.name); };

因此，基本上，我们希望从class First的原型中获取该功能。有几种方法可以做到这一点。

一种简单的方法是扩展第二个类的 prototype ：

class First {
  showName() { console.log(this.name); }
}
class Second {}
Second.prototype.showName = First.prototype.showName;

const node = new Second();
node.name = 'Second has a name now.';
node.showName();

另一种方法是实例化：

class First {
  showName() { console.log(this.name); }
}
class Second {
  constructor() {
    this.showName = First.prototype.showName;
  }
}

const node = new Second();
node.name = 'Second node.';
node.showName();

在那之后，应该容易地调整函数的内容。

编辑：在对问题进行了一些评论之后，这也是一种可行的方法来实现同样的目的：

const showName = function showName() { console.log(this.name); }

class First {}
class Second {}

First.prototype.showName = showName;
Second.prototype.showName = showName;

const node = new Second();
node.name = 'Second name.';
node.showName();

Answer 2

方法声明错误，应为：

myMethod() {
}

以正确的方式进行操作，并为通用方法和属性创建基类，并继承任何将共享这些属性的类：

class Base {
  constructor(){
    this.name = "";
  }
  showName(){
        console.log('Name of the node:', this.name);
    }
}

class First extends Base {
    constructor(){
      super();
        this.elem = document.createElement("br");
        this.name = this.elem.nodeName;
    }
}

class Second extends Base  {
    constructor() {
          super();
        this.elem = document.createElement("div");
        super.name = this.elem.nodeName;
    }
}

window.testObject = new Second();
testObject.showName();

那是最好的OOP，而不是XGH。

Reference

如何借用类的方法而不扩展它？

2 个答案: