前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >console.log()如何缩写为log()

console.log()如何缩写为log()

作者头像
李维亮
发布2021-07-09 10:53:07
1K0
发布2021-07-09 10:53:07
举报
文章被收录于专栏:李维亮的博客

因为嫌console.log()的写法太繁琐,想将其简写为log()。 我最初是这样写的:

代码语言:javascript
复制
 var log = console.log;
 log(..);

结果输出为:

代码语言:javascript
复制
TypeError: Illegal invocation

谷歌一番之后在Stack Overflow上找到这个答案:

代码语言:javascript
复制
var log = console.log.bind(console);

看到这个答案后,突然眼前一亮,因为我恰好刚刚在《You Don't Know JS》系列中读到过相关内容。虽然SO上只有答案没有解释,但是读过的内容瞬间在大脑中盘旋,帮我理解了这种写法的原理。刚刚学过的内容派上了用场,这种感觉太棒了!;-D

好了,不卖关子了,再卖会被鄙视的。;-)

言归正传。Javascript语言采用的是静态作用域规则(lexical scoping):

代码语言:javascript
复制
function foo() {
    console.log( a ); // 2
}

function bar() {
    var a = 3;
    foo();
}

var a = 2;

bar(); //2

但是,function中的this是个例外,this并不指function对象本身,也不是指function的作用域对象。而是在运行时绑定到特定的对象上。即它采用的是动态作用域规则。参见这篇文章

另外,一个function即便是定义在一个对象中,作为对象的一个“方法”,它也只不过是一个普通的函数而已,跟其他函数没有任何区别。在执行时仍然需要为this绑定一个具体的对象。

代码语言:javascript
复制
var obj = {
    a: 1,
    foo: function f() {
        console.log(this.a);        
    }
}

obj.foo(); //1

var g = obj.foo;
g();    //undefined

g = obj.foo.bind(obj);
g();    //1

注意:

  1. 上面的代码段中,函数foo在非严格模式下如果没有明确绑定对象,则会绑定到全局对象,所以输出undefined。在严格模式下则会报错。
  2. 为什么obj.foo() 可以正确输出呢?原因在于这种调用方式会隐式绑定到执行这个方法的对象上(obj)。

经过上面的分析,答案已经很明了了。在

代码语言:javascript
复制
var log = console.log;

中,log指向的其实是未绑定到console的普通的函数。可以设想log函数中使用到了诸如this.xxx() 之类的语句,而在全局变量中并没有此类方法,所以会报出错误:

代码语言:javascript
复制
console.log.call(console, "stuff")//stuff
console.log.call(window, "stuff") //TypeError: Illegal invocation

参考资料: https://github.com/getify/You-Dont-Know-JS http://code.google.com/p/chromium/issues/detail?id=48662

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-12-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档