Чи є спосіб змусити будь-яку функцію вивести оператор console.log, коли він викликається, зареєструвавши десь глобальний хук (тобто, не змінюючи саму фактичну функцію) або якимось іншим способом?
Чи є спосіб змусити будь-яку функцію вивести оператор console.log, коли він викликається, зареєструвавши десь глобальний хук (тобто, не змінюючи саму фактичну функцію) або якимось іншим способом?
Відповіді:
Ось спосіб збільшити всі функції у глобальному просторі імен за допомогою вибраної вами функції:
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
не матиме додаткової поведінки.
fn.apply(this, arguments);
наreturn fn.apply(this, arguments);
return
до внутрішньої функції.
Як на мене, це виглядає як найелегантніше рішення:
(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);
};
}());
Існує новий спосіб використання Proxy для досягнення цієї функціональності в JS. припустимо, що ми хочемо мати console.log
щоразу, коли викликається функція певного класу:
class TestClass {
a() {
this.aa = 1;
}
b() {
this.bb = 1;
}
}
const foo = new TestClass()
foo.a() // nothing get logged
ми можемо замінити наш екземпляр класу на Proxy, який замінює кожну властивість цього класу. так:
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"
переконайтесь, що це насправді працює в Codepen
Пам'ятайте, що використання Proxy
дає вам набагато більше функціональних можливостей, ніж просто реєстрація імен консолі.
Крім того, цей метод працює в 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 простий і може не працювати для більш складних імен / оголошень функцій.
Ви можете приєднати власну функцію до console.log для всього, що завантажується.
console.log = function(msg) {
// Add whatever you want here
alert(msg);
}