虽然不是专业前端，偶尔也需要写写js代码，经常会有打印日志的需求。

直接用console.log有点原始，但弄个函数把console.log包起来又会导致控制台丢失行号信息。

于是就网上小搜了一下，简单封装一个JS日志库，主要特性如下：

  • 自动在日志信息前添加带颜色的标题、当前时间信息

  • 支持日志级别控制（Fatal, Error, Warn, Info, Debug, Trace）

  • 像原生方法一样支持多个入参

  • 控制台可正确显示行号

代码就不详说了，简单记一下这次新学到的姿势：

  1. 使用console.log.bind方法来添加时间等信息，同时保证行号正确

     this._debug = console.log.bind(console, '%c%s[%s][DEBUG]', "color:#800080", title, _LogDateTime);
 // 其中重写了_LogDateTime的toString方法，使它能返回实时的时间

    但这里有个问题，就是日志的颜色只能给前边的%s[%s][DEBUG]部分，我还不知道如何解决。

  2. 利用Object.defineProperty和Object.freeze实现Logger.LEVEL不可修改

  3. 用到了构造函数，大概还是了解了prototype是个啥，以及this的坑（this动态指向调用方），不得不说js的历史问题真是一言难尽。

» 查看完整代码点这里：Logger.js

此页面已经引用了此库，你可以直接F12打开控制台，查看log对象或Logger类。（请忽略后边的disqus报错）