在拿出插件之前,先回顾一下 apply() 的用法,这里和 call() 做比较.
JavaScript 中的每一个 Function 对象都有一个 apply() 方法和一个 call() 方法,它们的语法分别为:
/*apply()方法*/
function.apply(thisObj[, argArray])
/*call()方法*/
function.call(thisObj[, arg1[, arg2[, [, ...argN]]]]);
它们各自的定义:
apply:应用某一对象的一个方法,用另一个对象替换当前对象.例如:B.apply(A, arguments); 即 A 对象应用 B 对象的方法.
call:调用一个对象的一个方法,以另一个对象替换当前对象.例如:B.call(A, args1,args2); 即 A 对象调用 B 对象的方法.
它们的共同之处:
都 "可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象".
它们的不同之处:
apply:最多只能有两个参数--新 this 对象和一个数组 argArray.如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里.如果 argArray 不是一个有效的数组或 arguments 对象,那么将导致一个 TypeError.如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj,并且无法被传递任何参数.并且 apply 具有打散参数的作用.
call:它可以接受多个参数,第一个参数与 apply 一样,后面则是一串参数列表.这个方法主要用在 js 对象各方法相互调用的时候,使当前 this 实例指针保持一致,或者在特殊情况下需要改变 this 指针.如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj.
实际上,apply 和 call 的功能是一样的,只是传入的参数列表形式不同.
以上只为更好的理解代码:
<script>
//插件
(function() {
/*
* logEl 输出的容器element
* isInitialized 是否初始化
* _console
*/
var logEl, isInitialized = false,
_console = {};
/*
* 创建元素
* tag 标签名称
* CSS 样式
*/
function createElement(tag, css) {
var element = document.createElement(tag);
element.style.cssText = css;
return element;
}
/*
* 生成面板
* options 自定义样式对象
*/
function createPanel(options) {
options.bgColor = options.bgColor || 'black';
options.color = options.color || 'lightgreen';
options.css = options.css || '';
var div = createElement('div', 'font-family:Helvetica,Arial,sans-serif;font-size:10px;font-weight:bold;padding:5px;text-align:left;opacity:0.8;position:fixed;right:0;top:0;min-width:200px;max-height:50vh;overflow:auto;background:' + options.bgColor + ';color:' + options.color + ';' + options.css);
return div;
}
/*
* 日志信息,自定义log方法
*/
function log() {
var el = createElement('div', 'line-height:18px;background:' + (logEl.children.length % 2 ? 'rgba(255,255,255,0.2)': '')); // zebra lines
var val = [].slice.call(arguments).reduce(function(prev, arg) { //
return prev + ' ' + arg;
},
'');
el.textContent = val;
logEl.appendChild(el);
// Scroll to last element
logEl.scrollTop = logEl.scrollHeight - logEl.clientHeight;
}
/*
* 清空控制台
*/
function clear() {
logEl.innerhtml = '';
}
/*
* 初始化插件,可以添加附加选项
*/
function init(options) {
if (isInitialized) {
return;
}
isInitialized = true;
options = options || {};
logEl = createPanel(options);
document.body.appendChild(logEl);
if (!options.freeConsole) {
// 同步打印更新
_console.log = console.log;
_console.clear = console.clear;
console.log = originalFnCallDecorator(log, 'log');
console.clear = originalFnCallDecorator(clear, 'clear');
}
}
/*
* 销毁插件并恢复原来的控制台显示
*/
function destroy() {
isInitialized = false;
console.log = _console.log;
console.clear = _console.clear;
logEl.remove();
}
/*
* 验证初始化
*/
function checkInitialized() {
if (!isInitialized) {
throw 'You need to call `screenLog.init()` first.';
}
}
function checkInitDecorator(fn) {
return function() {
checkInitialized();
return fn.apply(this, arguments);
};
}
/*
* 包含前台打印和后台打印
*/
function originalFnCallDecorator(fn, fnName) {
return function() {
//前台打印
fn.apply(this, arguments);
if (typeof _console[fnName] === 'function') {
//后台打印
_console[fnName].apply(console, arguments);
}
};
}
window.screenLog = {
init: init,
log: originalFnCallDecorator(checkInitDecorator(log), 'log'),
clear: originalFnCallDecorator(checkInitDecorator(clear), 'clear'),
destroy: checkInitDecorator(destroy)
};
})();
</script>
<script>
screenLog.init();
screenLog.log('String: Hello world');
screenLog.log(21, 'multiple arguments');
screenLog.log('Arrays', [1, 2, 3]);
console.log('console.log also gets logged.');
var i = 20;
function log() {
console.log('console log', Date.now());
if (--i) {
setTimeout(log, 1000);
}
}
log();
</script>
运行代码
来源: https://www.cnblogs.com/yinn/p/8309893.html