用函数替换了class A.当我用webpack构建时,我没有收到错误,但它不能正常工作.当然,它在class A时工作得很好,但只有当它更改为function A时才能正常工作,如下所示.最可疑的部分是init()方法中的this.updateBind()函数.它是类中的一个箭头函数,所以我认为当我将类更改为函数时可能会有问题.我不会上传整个源代码,因为我必须包括库,并与webpack建立它.这是因为/dist文件夹中的main.jsvender.js文件很难阅读.我认为this.updateBind()函数可能是导致问题的原因,我的猜测正确吗?在将class A转换为function A时,我应该如何处理箭头功能?

class A extends B {
  constructor(m) {
    super(m);
  }
  init() {
    this.updateBind = () => {
      this.update();
    }
    window.addEventListener('resizeEnd', this.updateBind);
  }
  update() {
    this.scroll.update();
  }
  destroy() {
    window.removeEventListener('resizeEnd', this.updateBind);
    this.scroll.destroy();
  }
}

用函数A替换A类的源代码

function A(m) {
  B.call(this, m);
}
A.prototype.init = function() {
  this.updateBind = () => {
    this.update();
  }
  window.addEventListener('resizeEnd', this.updateBind);
}
A.prototype.update = function() {
  this.scroll.update();
}
A.prototype.destroy = function() {
  window.removeEventListener('resizeEnd', this.updateBind);
  this.scroll.destroy();
}

A.prototype = Object.create(B.prototype);
A.prototype.constructor = B;

推荐答案

我认为问题不在于您的箭头函数,而在于您如何通过原型继承B.当你做这行的时候:

A.prototype = Object.create(B.prototype);

您在前面的A.prototype中覆盖了所有其他方法,因此每个方法都变成了undefined.展开下面的代码片段以查看此问题:

function B(m) {
  console.log('B constructor', m);
}

function A(m) {
  B.call(this, m);
}

A.prototype.init = function() {
  this.updateBind = () => {
    this.update();
  }
  window.addEventListener('resizeEnd', this.updateBind);
}
A.prototype.update = function() {
  this.scroll.update();
}
A.prototype.destroy = function() {
  window.removeEventListener('resizeEnd', this.updateBind);
  this.scroll.destroy();
}
A.prototype = Object.create(B.prototype); // problem here
A.prototype.constructor = B;

const test = new A(1);
console.log(test.update); // undefined

要解决此问题,只需将该行移到其余方法定义的上方,如下所示:

function B(m) {
  console.log('B constructor', m);
}

function A(m) {
  B.call(this, m);
}
A.prototype = Object.create(B.prototype); // moved up
A.prototype.constructor = B;              // moved up
A.prototype.init = function() {
  this.updateBind = () => {
    this.update();
  }
  window.addEventListener('resizeEnd', this.updateBind);
}
A.prototype.update = function() {
  this.scroll.update();
}
A.prototype.destroy = function() {
  window.removeEventListener('resizeEnd', this.updateBind);
  this.scroll.destroy();
}

const test = new A(1);
console.log(test.update); // not undefined anymore

Javascript相关问答推荐

如何使用Echart 5.5.0创建箱形图

在Angular中将样式应用于innerHTML

如何在Angular中插入动态组件

在vercel throws上部署带有gunjs的sveltekit应用无法找到模块./' lib/文本编码'

当作为表达式调用时,如何解析方法decorator 的签名?

Chromium会将URL与JS一起传递到V8吗?

使用LocaleCompare()进行排序时,首先使用大写字母

如何使onPaste事件与可拖动的HTML元素一起工作?

如何使用TypeScrip设置唯一属性?

当我在Reaction中创建一个输入列表时,我的输入行为异常

TinyMCE 6导致Data:Image对象通过提供的脚本过度上载

使每个<;li>;元素的 colored颜色 与随机生成的 colored颜色 列表不同(不重复

基于产品ID更新条带产品图像的JavaScript命中错误

将相关数据组合到两个不同的数组中

如果对象中的字段等于某个值,则从数组列表中删除对象

TypeORM QueryBuilder限制联接到一条记录

我们是否可以在reactjs中创建多个同名的路由

输入数据覆盖JSON文件

Html/JS:如何在脚本执行前阻止呈现?

如何为Reaction应用程序创建仅登录的路由?