Question

我已经创建了一个类，并且试图从该类内部的另一个方法中调用该方法。我在网上看到有人说使用'this'关键字，但是从示例中可以看出，这是行不通的。有人可以简单地解释一下如何从同一类中的另一个方法内部调用一个类方法吗？谢谢！

class Form {
  constructor() {
  }
  fn1 () {
    console.log('fn1 calling fn2 now:')
    this.fn2();
  }

  fn2 () {
    console.log('fn1 called me')
  }
}

let myForm = new Form();
myForm.fn1();

Example can be found here

我一直收到的错误是：未捕获的TypeError：this.fn2不是函数

Answer 1

您显示在问题中的代码没有错-应该可以正常工作。当您将方法传递给.addEventListener()作为回调（在代码中显示您有链接）时，就会出现问题。

更改此：

document.getElementById('call-func').addEventListener('click', this.fn1);

对此：

document.getElementById('call-func').addEventListener('click', this.fn1.bind(this));

问题是传递this.fn1会丢失this的值，因此当侦听器稍后调用回调时，它所属的对象会丢失，然后{{ 1}}是错误的。另外，this将fn1()的值显式设置为触发事件（不是您的对象）的DOM元素。

如果您这样做，将会发生相同的事情：

.addEventListener()

在侦听器调用时，使用this重新绑定let f = this.fn1; f();的值。

仅供参考，您也可以使用胖箭头功能来做到这一点：

.bind(this)

或者，更旧的方法：

this

我更喜欢使用document.getElementById('call-func').addEventListener('click', () => this.fn1());。

有关事件监听器和var self = this; document.getElementById('call-func').addEventListener('click', function() { self.fn1(); });的更多说明，请点击此处："This" within es6 class method

有关在此处调用函数When you pass 'this' as an argument时如何设置.bind(this)的一般概念的更多说明：

如何从同一个类方法内部调用一个类方法？

1 个答案: