面试题:自定义方法替代控制台输出console.log()

面试中遇到过的一道面试题:如何封装一个console.log()?
当时实在不理解为什么要封装这个,为什么不直接拿来用,可能是为了考察applyarguments
回来之后问了度娘,得到了部分的答案:

在开发的过程中,可能会因为debug,加入console.log()这样的语句,在控制台输出内容,方便debug,但是往往上生产就忘记删除,导致信息泄露...

当然,它的功能可能不仅仅于此,还有其他功能待挖掘,今后再做补充吧。
仅仅是封装这个功能很简单,用到了apply()

function logInfo(){
  console.log.apply(console,arguments);
}

就可以直接拿来用了,为什么要使apply再指向console呢?
是因为我们其实还是要使用console.log()这个方法来做输出,只不过每次输出的内容不一样,这里的内容就是arguments
很明显在这个封装的方法中传入的参数是不确定的,并不确定你要在控制台输出什么东西,所以传入的参数就无法预知,这也就是call()apply()的区别,详情另起一篇文章,所以这个时候就要用到arguments对象了,官方的说法:

arguments 是一个对应于传递给函数的参数的类数组对象。
arguments对象不是一个 Array 。它类似于Array,但除了length属性和索引元素之外没有任何Array属性。

arguments在封装的方法中,是作为一个参数传递给了log()方法,例如:logInfo('hello','world'),那么arguments就是['hello','world'],使用console.log.apply(console,arguments)主要是用来把arguments中的每个参数都作为实参来传递给console.log()的。
如果像下面这样直接调用:

function logInfo() {
  console.log(arguments);
}
logInfo(1, 2, 3); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

那么会将arguments作为一个数组进行打印输出,而不是将其中的每一项作为参数传递给console.log()进行输出,很明显,上例的结果并不是我们想要的,我们想要的结果是这样的1,2 3,而apply()就正好可以实现这个需求。
回顾下apply()的知识:

  • 语法func.apply(thisArg,[argsArray])
  • thisArg
    在 func 函数运行时使用的 this 值。
  • argsArray
    一个数组或者类数组对象,其中的数组元素将作为单独的参数传给func函数
    这也就是为什么apply()能实现这个需求的原因,它会将数组(即封装函数中的arguments)中的每个元素都作为参数传递给函数(也就是console.log())。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,195评论 0 13
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,808评论 2 17
  • 三、闭包和高阶函数 3.1 闭包 3.1.1 变量的作用域 所谓变量的作用域,就是变量的有效范围。通过作用域的划分...
    梁同学de自言自语阅读 1,484评论 0 6
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,092评论 1 10
  • 贰零壹捌·零贰·晚安语录·选集 最爱一月的尾巴 像是春天的麦芽 秋风里飘过的稻香 从前我以为是人们和作家不一样,如...
    莫槿年华安如梦阅读 741评论 9 22