再说IE9中的console

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/liusaint1992/article/details/79110280

IE9有个console的坑。即window.console对象可能是不存在的，也可能是存在的。所以代码中遗留的console.log都可能是引起报错代码中断。而当你把控制台打开，这个console就存在了，代码就能正常运行了。所以一般人并不容易找到代码的问题出在哪里。

早期的解决无非是　

(function() {
    if (!window.console) {
        window.console = {}
        console.log = function() {}
    }
})()

这样就保证了运行console.log不报错。

但是console中其实是有很多方法的，比如console.time。我们需要为所有可能的调用写一个保底的空函数。这样大多数的调用都不会报错了。

(function() {
    var emptyFn = function() {};
    if (!window.console) {
        window.console = {};
    }
    var consoleArr = ['log', 'info', 'warn', 'error', 'dir', 'time', 'timeEnd', 'trace', 'assert', 'Console', 'debug', 'dirxml', 'table', 'group', 'groupCollapsed', 'groupEnd', 'clear', 'count', 'markTimeline', 'profile', 'profileEnd', 'timeline', 'timelineEnd', 'timeStamp'];
    var consoleLen = consoleArr.length;
    while (consoleLen--) {
        if (!window.console[consoleArr[consoleLen]]) {
            window.console[consoleArr[consoleLen]] = emptyFn;
        }
    }
})()

IE9下面的console方法只有9个。而chrome下有20多个。正常情况下现在使用console下的各种方法都不报错了。

但是测试说IE9偶尔会报console.time的错。输出console一看，发现并没有自已添加的那些方法。是我的兼容代码没有运行吗？不是的，分析了下流程应该是这样：打开网页的时候测试并没有打开控制台，这时console对象不存在，我们自已创建了一个并且挂了很多空的方法上去，包括了IE本来没有的方法。但是在打开控制台的瞬间，浏览器又自已定义了一遍console。于是我们添加的那些多余的方法又没有了。调用IE不存在的console方法还是报错了。

当然，对于普通用户来讲其实做到这个地步已经够了，因为普通用户不会打开控制台来看，会打开控制台的用户一般也不会用IE浏览器了。不打开控制台，代码也是能正常运行的。

最后，出于对代码健壮性的考虑。我们可以不直接使用原生的console方法。而是自已在外面封装一层。调用我们封装之后的方法。这样我们不管是简单地防报错中断，还是针对浏览器写shim方法。都能减少代码的不可控性。当然，如果有这样封装，一定要在代码规范里写清楚，避免其他同事直接调用相关原生方法。