通过在某处注册全局钩子(即,不修改实际函数本身)或通过其他方式调用任何函数时,有没有办法使任何函数输出 console.log 语句?
自动将 console.log 添加到每个函数
IT技术
javascript
function
logging
hook
2021-02-02 14:27:28
6个回答
这是一种使用您选择的函数来扩充全局命名空间中的所有函数的方法:
function augment(withFn) {
var name, fn;
for (name in window) {
fn = window[name];
if (typeof fn === 'function') {
window[name] = (function(name, fn) {
var args = arguments;
return function() {
withFn.apply(this, args);
return fn.apply(this, arguments);
}
})(name, fn);
}
}
}
augment(function(name, fn) {
console.log("calling " + name);
});
不利的一面是调用后创建的任何函数augment
都不会具有额外的行为。
对我来说,这看起来是最优雅的解决方案:
(function() {
var call = Function.prototype.call;
Function.prototype.call = function() {
console.log(this, arguments); // Here you can do whatever actions you want
return call.apply(this, arguments);
};
}());
记录函数调用的代理方法
在 JS 中有一种使用Proxy实现此功能的新方法。假设我们想要在console.log
调用特定类的函数时有一个:
class TestClass {
a() {
this.aa = 1;
}
b() {
this.bb = 1;
}
}
const foo = new TestClass()
foo.a() // nothing get logged
我们可以用覆盖这个类的每个属性的代理替换我们的类实例化。所以:
class TestClass {
a() {
this.aa = 1;
}
b() {
this.bb = 1;
}
}
const logger = className => {
return new Proxy(new className(), {
get: function(target, name, receiver) {
if (!target.hasOwnProperty(name)) {
if (typeof target[name] === "function") {
console.log(
"Calling Method : ",
name,
"|| on : ",
target.constructor.name
);
}
return new Proxy(target[name], this);
}
return Reflect.get(target, name, receiver);
}
});
};
const instance = logger(TestClass)
instance.a() // output: "Calling Method : a || on : TestClass"
请记住, usingProxy
为您提供了比仅记录控制台名称更多的功能。
这种方法也适用于 Node.js的了。
如果您想要更有针对性的日志记录,以下代码将记录特定对象的函数调用。您甚至可以修改对象原型,以便所有新实例也可以记录。我使用 Object.getOwnPropertyNames 而不是 for...in,因此它适用于没有可枚举方法的 ECMAScript 6 类。
function inject(obj, beforeFn) {
for (let propName of Object.getOwnPropertyNames(obj)) {
let prop = obj[propName];
if (Object.prototype.toString.call(prop) === '[object Function]') {
obj[propName] = (function(fnName) {
return function() {
beforeFn.call(this, fnName, arguments);
return prop.apply(this, arguments);
}
})(propName);
}
}
}
function logFnCall(name, args) {
let s = name + '(';
for (let i = 0; i < args.length; i++) {
if (i > 0)
s += ', ';
s += String(args[i]);
}
s += ')';
console.log(s);
}
inject(Foo.prototype, logFnCall);
这是一些 Javascript,它取代了将 console.log 添加到 Javascript 中的每个函数;在Regex101上玩它:
$re = "/function (.+)\\(.*\\)\\s*\\{/m";
$str = "function example(){}";
$subst = "$& console.log(\"$1()\");";
$result = preg_replace($re, $subst, $str);
这是一个“快速而肮脏的黑客”,但我发现它对调试很有用。如果你有很多函数,要小心,因为这会增加很多代码。此外,RegEx 很简单,可能不适用于更复杂的函数名称/声明。
其它你可能感兴趣的问题