JS中如何在一个方法内调用另一个方法？this使用详解-嘻道妙招

（深吸一口气）咱们今天来聊聊这个让新手抓狂的问题——明明写了两个方法，怎么就让它们互相调用了呢？哎，你是不是也遇到过这种情况：在方法A里调用方法B，结果浏览器直接给你甩个"undefined is not a function"？别慌，我当年对着屏幕啃指甲的样子，和现在的你一模一样！

（敲黑板）咱们先来看段代码：

javascript复制const robot = {
  sayHi() {
    console.log("你好呀！");
    this.sayBye(); // 这里想调用另一个方法
  },
  sayBye() {
    console.log("再见咯~");
  }
}

这时候要是直接robot.sayHi()，你会发现两个问候语都能正常输出。但是！（突然提高音量）如果改成这样：

javascript复制const hiFunc = robot.sayHi;
hiFunc(); // 完犊子！报错了！

为什么同样的方法换个姿势调用就翻车？这就是咱们今天要破解的??this之谜??。

（挠头）先做个实验吧！在方法里加一句console.log(this)，你会发现：

（拍大腿）原来问题的症结在这里！方法能不能互相调用，全看this有没有指对地方。就像你去咖啡店点单，对着空气喊"我要拿铁"，服务员肯定不搭理你——得找准对象才行。

（竖起三根手指）我常用的解决方案就这三个：

??箭头函数大法??
把方法改成箭头函数：

javascript复制const robot = {
  sayHi: () => {
    console.log("你好呀！");
    this.sayBye(); // 现在this指向外层作用域
  }
}

（小声bb）不过这个方法有副作用，就像吃火锅配冰淇淋，可能拉肚子...

??bind强行绑定??
像给野马套缰绳：

javascript复制constructor() {
  this.sayHi = this.sayHi.bind(this);
}

适合用在class里，相当于给方法打预防针。

（扶额）去年我接了个外包项目，有个搜索框要连续触发两个校验方法。结果用户快速输入时，第二个方法死活不执行。最后发现是回调函数里的this指向了事件对象，而不是组件实例。解决方案？用了个双重保险：

javascript复制handleInput = (e) => {
  this.validateFormat();
  // 像这样双重绑定
  this.validateLength.apply(this);
}

（敲桌子）重点来了：??当方法需要传递参数时，记得用call或apply来锁死this??！

干了五年前端，我发现90%的"方法调用失败"都是this在作妖。现在养成了三个习惯：

（突然压低声音）偷偷告诉你们，我现在看到普通函数定义都会起鸡皮疙瘩...（笑）

最后说句掏心窝子的话：别被这个this吓住，它就像你家猫主子——摸顺毛了其实挺温顺的。多写几个案例，多在控制台打印this看看，保准你两三天就能驯服它！下次要是再遇到this乱跑的情况，记得回来看看这篇血泪总结哈~

本文由嘻道妙招独家原创，未经允许，严禁转载

JS中如何在一个方法内调用另一个方法？this使用详解