为什么JavaScript函数别名不起作用？

Question

我有一些Firebug控制台函数调用,我想在Firebug未启用时禁用,例如未定义控制台.这适用于IE6和FF3,但不适用于Chrome:

var log;

if(console){
  log = console.log;
}else{
  log = function(){ return; }
}

我在Chrome中收到"未捕获的TypeError:非法调用"= /

我在这里读到了这个问题,你必须应用一个上下文,这对我来说是一种新的...我似乎无法想象如何在所有浏览器中完成上述操作......

Answer 1

是的,你应该坚持上下文:

var log;

if (window.console && typeof console.log === "function"){
  // use apply to preserve context and invocations with multiple arguments
  log = function () { console.log.apply(console, arguments); };
} else {
  log = function(){ return; }
}

发生的事情是this在调用函数时隐式设置上下文(值),例如:

var obj = {
  method: function () { return this; }
};

obj.method() === obj; // true

在这种情况下,您正在调用一个被定义为对象属性的函数,当调用该函数时,该this值将设置为该对象.

现在,如您的示例中所示,如果将该方法的引用复制到变量:

var method = obj.method;
method() === window; // global object

如您所见,该this值指的是全局对象.

因此,为了避免这种隐式行为,您可以使用call或apply函数显式设置上下文.

Answer 2

在函数中包装函数(如console.log)的问题是它丢失了它的上下文,即它不会显示我们将"log"快捷方式放入的文件的正确行号.

相反,我建议这样的事情:

 window.log = ((window.console && window.console.log) ?
              console.log.bind(console) : 
              function(){});

这适用于firebug和chrome dev工具,并且在没有可用的控制台时不会抛出错误.并且 - 最重要的是 - 显示正确的文件和行号.