为什么在 Chrome DevTool 中一步步调试 JavaScript 函数的 toString 方法会被调用多次?

问题描述

测试环境:

  • MacOS v10.14.6;
  • Chrome 89.0.4389.82

问题描述:

我在一个函数toString方法中加了一个断点,并一步步调试,看到下一行调用toString方法

语言描述有点难,请看录屏:Video

为什么?

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    function fn() { }

    fn.toString = function () {
      debugger;
      console.log('toString called');
      const a = 'a';
      return a;
    };

    fn.toString();
  </script>
</body>

</html>

解决方法

使用IDE调试程序时就是这样。开发工具通过调用其 toString 函数来显示变量的值。当我在IDEA中调试Java程序时,它也是这样工作的。