使用Proxy拦截console对象的相关属性并做一些自定义的打印操作

写这篇文章的初衷是因为今天参加了一场面试，面试的时候面试官提了一个问题：如何获取console.log的文本信息并将其显示到用户界面上。当时有点被问懵的感觉，面试结束之后仔细想想是因为当时没有太多的思考时间，想要实现该功能并不难。

思路：通过借助ES6 的proxy拦截console对象自身所有的属性，并代理到我们自定义的console对象进行自定义的操作

首先自定义一个的customConsoleHandler对象, 取出console对象自身所有的属性全部插入到自定义的customConsoleHandler对象，这个对象的作用是将console的所有操作代理到该对象身上进行操作

const customConsoleHandler = {}
const originConsoleProperty = Object.getOwnPropertyNames(console);
originConsoleProperty.forEach(key => {   
     customConsole[key] = function mutator (values) {
        // 我们可以在这里去自定义一些打印的操作    
}});

接着，我们需要拦截console对象，用户对console对象的所有操作我们都需要代理到自定义的customConsoleHandler中

let consoleProxy = new Proxy(console, {    
    get (target, key) {        
        target = customConsoleHandler.hasOwnProperty(key) ? customConsoleHandler : target;
        return Reflect.get(target, key);
 }})

这样子我们就能通过拦截console对象身上的属性，获取其传入的参数进行一些自定义的操作啦

例如，要实现获取console.log的参数，打印到界面中，我们可以这样修改第一段代码：

originConsoleProperty.forEach(key => {  
  if (key === 'log') {     
   customConsole[key] = function log (...args) {   
        document.body.innerText = args.join(' '); 
    }  
} else { 
       customConsole[key] = function mutator (values) { 
           // 我们可以在这里去自定义一些打印的操作
  } }

通过调用consoleProxy.log('这是一段测试的内容'), 那么接着body标签就会插入一段文本啦。

如有笔误，欢迎指正， 谢谢。