JavaScript同类方法调用报Cannot read property 'foo' of undefined如何解决

报错原因 #

JavaScript中普通函数的this指向是运行时调用方式决定的，和定义位置无关：
你给出的代码中，将a.foo、a.bar作为参数传入b.call时，只是传递了函数本身的引用，切断了函数和a实例的关联。当b.call内部以fn()的方式直接调用函数时，属于无上下文的普通调用，严格模式下this会被赋值为undefined，非严格模式下指向全局对象window。
第一次调用b.call(a.foo)时，foo方法内部没有用到this，所以可以正常执行输出foo；第二次调用b.call(a.bar)时，bar方法内部需要读取this.foo，此时this为undefined，自然就抛出了TypeError: Cannot read property 'foo' of undefined的错误。

正确的同类方法调用&上下文丢失解决方案 #

正常情况下，你在类的方法内部通过this.方法名()调用同类方法没有问题，只有当方法被作为独立值传递（比如作为回调、参数传入其他函数）时才会出现this丢失的问题，常见解决方案如下：

• 调用时绑定实例上下文：使用Function.prototype.bind提前把方法的this绑定到实例上，修改传参逻辑为b.call(a.bar.bind(a))即可。
• 类方法用箭头函数定义：箭头函数的this继承自定义时的外层上下文，不会随调用方式变化，修改类方法的定义即可：

class A {
  foo = () => {
    console.log("foo");
  }

  bar = () => {
    console.log("bar");
    this.foo();
  }
}

• 传参时用包装函数包裹：不直接传递方法引用，而是传递一个箭头函数，在箭头函数内部以实例调用方法：b.call(() => a.bar())，此时方法调用的this自然指向a实例。

内容的提问来源于stack exchange，提问作者Nelson Mfinda