Javascript中函数bind方法的使用

之前在学习写chrome插件的时候, 参考了官方live headers的例子. 其中有一段这样的代码:

live headers background.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.debugger.attach({tabId:tab.id}, version,
      onAttach.bind(null, tab.id));
});

var version = "1.0";

function onAttach(tabId) {
  if (chrome.runtime.lastError) {
    alert(chrome.runtime.lastError.message);
    return;
  }

  ...
}

看这段代码时对bind的调用不是很明白. 当时也没有搞清楚, 于是用了一个简单的回调代码替换之. 代码也能跑通. 不过后来出了一系列问题, 调试到最后发现竟然是这个函数的问题. 看来某些代码还是粘贴复制会比较好;)

由于在网上没有找到很好的说明, 于是在stackoverflow问了个问题, 很快就有人回复了(非常感谢这位同学, 讲的十分详细).

结合这位同学详细的说明和MDN的上说明, 大概是了解了bind的说明. 总结成一句话, 大概是: 返回一个指定this, 指定参数的匿名函数.

以下是一个简单的小例子:

practice
1
2
3
4
5
6
7
8
9
10
11
g_id = '11.11'

onbind = (id = '11') ->
    console.log "id is #{id}"

call_func = (func) ->
    func()

call_func onbind

call_func onbind.bind null, g_id

对应的输出结果为:

1
2
11
11.11

在网上我们可以常常看到bindcall, apply一起出现. 简单说bindcall, apply的区别是: 前者是返回对应函数, 后者是立即调用. callapply的差别可以在这里看到.

PPPPSSSS

双十一的促销短信实在是有够多的. 另外JD的折扣力度也相当大, 可以关注下;)

Comments