返回博客

一个难以发现的 JavaScript Bug

本文分析了一个难以发现的 JavaScript Bug,该 Bug 发生在使用 `const` 声明变量时,由于没有变量提升导致的错误。文章包含了出错代码、Webpack 打包后代码以及错误原因分析。

Mt.r
|

写了一个乍一眼看上去没什么问题的 bug

import test from './test';

// 这一行会引发 bug,知道为什么吗?
console.log(bug(123));

const a = {
  test,
};

export function bug(params) {
  console.log(`params`, params);
  console.log(`a`, a);
  return params;
}

console.log(bug(456));

export default bug;

代码走到我注释的那一行 console.log(bug(123)); 就开始报错了。知道为什么吗?

原因是 const 没有变量提升。。。

当然好奇宝宝想看一下 webpack 打包后的代码是什么样子。

(() => {
  'use strict';
  console.log(n(123));
  const o = {
    test: {
      a: 123,
      b: 234,
      c: 345,
    },
  };
  function n(n) {
    return console.log('params', n), console.log('a', o), n;
  }
  console.log(n(456));
  const e = n;
  document.body.appendChild(
    (function () {
      const o = document.createElement('div');
      return (o.innerHTML = 'Hello Bug'), console.log('bug', e(789)), o;
    })()
  );
})();