javascript - 如何将 console.log 绑定(bind)到另一个函数调用，以便我可以在调用它的控制台中看到脚本的行号？

Question

我的代码可以工作，但带有额外的括号，如 myfunction()();。它应该像正常情况一样使用单括号执行，例如 myfunction();。

我正在构建 console.time(); console.timeEnd(); 用于没有 native 内置的浏览器(例如

这是我在“polyfill.js 文件”中的代码。

(function() {
    'use strict';
    var console=window.console,  timers={};
    
    if (!console.time) {
        
        console.time = function(name) {
            var datenow = Date.now();
            name = name? name: 'default';
            if (timers[name]) {
                console.warn('Timer "'+name+'" already exists.');
            }
            else timers[name] = datenow;
        };
        
        console.timeEnd = function(name) {
            var datenow = Date.now();
            name = name? name: 'default';
            if (!timers[name]) {
                console.warn('Timer "'+name+'" does not exists.');
            }
            else {
                var endt = datenow - timers[name];
                delete timers[name];
                //below is the line where some changes are needed, But I don't know how.
                return window.console.log.bind(window.console, name+ ': ' +endt+ 'ms');
            }
        };
    }
}());

现在在另一个文件“main.js 文件”中，当我使用 console.time(); console.timeEnd();，它应该在浏览器控制台中记录这个文件的代码行号(而不是 polyfill.js 文件的行号)。当然它可以工作，但请注意下面的附加括号“()()”并不酷。

console.time();
//any code for performance test goes here.
console.timeEnd()(); //Note here "()()". It should be single "()"

我已经咨询了这 2 个 stackoverflow 问题，但无法得出正确答案。

• Wrapping a wrapper of console log with correct file/line number?
• A proper wrapper for console.log with correct line number?

我还检查了 new Error().stack; 作为一个选项，但我正在为其构建 polyfill 的那些浏览器也不支持它。

注意:如果有人可以用eval(); 提出解决方案，您也可以。这对我来说也是可以接受的。

Answer 1

实际上有一个名为 console.trace 的函数，您可以在 MDN page 中阅读更多相关信息.它所做的是将整个堆栈跟踪打印到调用它的行。

因此，例如，运行下一个代码:

function firstFunc() {
  secondFunc();
}

function secondFunc() {
  console.trace('I was called here!');
}

console.log('Calling firstFunc:');
firstFunc();

将在控制台打印出这个输出:

Calling firstFunc:

I was called here!
secondFunc @ VM141:6
firstFunc @ VM141:2
(anonymous) @ VM141:10 // Internal browser trace

请注意，在给定的输出中，所有函数都在 Chrome 控制台中被调用和定义，因此 @VM141:。通常，它打印文件而不是 VM。因此，如果它位于 index.js 文件中，它将如下所示:

Calling firstFunc:

I was called here!
secondFunc @ index.js:8

兼容性说明

上述方法适用于任何健全的浏览器，以及 IE11+。这是因为 console.trace 仅在 IE11 中实现。但是，根据 OP 的要求，我可以想到一种支持 IE10 的创造性方法，那就是使用 Error.prototype.stack property .现在，当然，正如 MDN 本身提到的那样，它是一个不应该在生产中使用的非标准功能，但也不支持 IE6。

通过创建一个 Error 实例然后打印它的堆栈，您可以获得类似的结果。

const sumWithTrace = (num1, num2) => {
  console.log(new Error().stack); // Creating a new error for its stack property
  return num1 + num2;
};

sumWithTrace(1, 5); // returns 6 and prints trace in console