css 当我用一个函数替换一个类时，我如何改变箭头函数？

fzsnzjdm 于 2023-04-01 发布在其他

关注(0)|答案(1)|浏览(89)

用函数替换了class A，我用webpack构建的时候没有出现错误，但是不能正常工作，当然，当是class A的时候工作的很好，但是只有当改成function A的时候才不能正常工作，如下图所示，最可疑的部分是init()方法里面的this.updateBind()函数，它是类里面的一个箭头函数，所以我认为当我将类更改为函数时可能会出现问题。我不会上传整个源代码，因为我必须包含库并使用webpack构建它。这是因为/dist文件夹中的main.js和vender.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;

css

来源：https://stackoverflow.com/questions/75861419/how-do-i-change-the-arrow-function-when-i-replace-a-class-with-a-function

1条答案

按热度按时间

j13ufse21#

我认为问题不在于你的箭头函数，而在于你如何通过原型继承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

赞(0）回复(0）举报 2023-04-01

我来回答

css 当我用一个函数替换一个类时，我如何改变箭头函数？

1条答案

相关问题

热门标签

最新问答