Electron调用自定义JavaScript类方法报is not a function错误如何解决

你当前的Rectangle类的constructor方法主动返回了自定义的rectangle变量，而JavaScript中如果类的构造函数显式返回一个引用类型（对象、DOM节点等），那么new操作符最终返回的就是你手动返回的这个对象，而不是Rectangle类的实例，这个返回的rectangle对象上没有挂载类定义的changeColour方法，所以调用时就会抛出类型错误。

方案1：移除constructor中的return语句（推荐） #

如果不需要手动返回自定义对象，直接删掉构造函数里的return rectangle;即可，此时new Rectangle()会正常返回类的实例，自带changeColour方法。你要挂载的矩形DOM实例可以挂载到类的属性上，修改后的类代码如下：

class Rectangle {
  constructor(height, width) {
    //draw a rectangle...
    // 把原来的rectangle变量挂载为实例属性
    this.rectangle_instance = rectangle;
    // 移除手动return语句
  }

  changeColour() {
   //do some colour changing...
    return something;
  }
}

module.exports = Rectangle;

该方案下你原有调用逻辑不需要做任何修改，即可正常调用rectangle_1.changeColour()。

方案2：保留自定义返回，手动挂载方法 #

如果你确实需要构造函数返回自定义的rectangle对象，可以把类的方法手动绑定到返回的对象上，修改后的类代码如下：

class Rectangle {
  constructor(height, width) {
    //draw a rectangle...
    // 手动把changeColour方法挂载到要返回的对象上
    rectangle.changeColour = this.changeColour.bind(this);
    return rectangle;
  }

  changeColour() {
   //do some colour changing...
    return something;
  }
}

module.exports = Rectangle;

该方案下你需要同步修改调用代码，移除多余的rectangle_instance属性调用，DOM插入部分修改为：

elem.appendChild(rectangle_1);

内容的提问来源于stack exchange，提问作者Adrian Perplexed some more