这段程式要这么拆解: (看下面的上色)
google.maps.event.addListener(marker,'click', function(content){
return function() {
infowindow.setContent(content);//set the content
infowindow.open(map,this);
}
}(content));
蓝底+紫底的部份的运算结果做为 addListener 的第三参数传进去
这个第三参数想要的是一个函式, 而等等你会看到这边的运算结果确实是一个函式
先讲结论, 这个函式并不是蓝底这一个, 而是亮红字这一个
事情是这样的
蓝底+紫底的部份其实只是一个单纯的函式呼叫
函式是蓝底字, 紫底字是呼叫
如果把蓝底函式叫做 wrapper 的话, 这一段其实就是 wrapper(content) 而已
这个函式如上所见它做的事单纯就是 return 亮红字的函式, 这里不妨叫它 handler
也就是说, wrapper 所做的事说穿了就只是 return handler; 而已
但究竟为什么要叠这么一层?
这就要说到 javascript 函式所谓 closure 的概念
closure 这个词中文译做“闭包”, 详细解释可以看中文维基 http://ppt.cc/rW9v
这里 wrapper 里的 handler 形成了一个闭包
这个闭包的用途是把中间的 content 变量包起来变成闭包的 upvalue
即使 handler 最终是被注册到系统去, 实际执行时是被系统呼叫
但是这个闭包里的 content 变量还是代表执行 wrapper 当下的 content 内容
(基本上可以说这就是闭包的用途)
而这当下的 content 是什么?
从 wrapper 的内容可以看出来其实就是紫底那块当中的 content 变量
所以借由闭包我们把一个函式需要的外部变量给包了起来
就不用另外对呼叫方做手脚了
(题外话, 对没有闭包的程式语言这就要费很大功夫
有的时候还需要呼叫方的程式配合...)
如果你有注意看的话会发现 infowindow 跟 map 变量好像也是这个闭包的 upvalue
但这段函式里没看到它的定义
这表示这两个变量它的内容会是 addListener 这行程式执行当下的变量内容
可能是外层函式或甚至是全域的变量 (然后内层函数的闭包继承了它的内容这样)
这也是闭包的好处之一
至于你后面问的 this 则是 javascript 的大哉问
关于这个可以看这篇文章
https://software.intel.com/zh-cn/blogs/2013/10/09/javascript-this
这里的状况是文中的第五种状况: handler 做为 callback 传进去
在这种状况下大家会有个默契, 会让 callback 里的 this 指向发生事件的物件
(用的是文中的第三种状况的技巧, 使用 call 或 apply 设定之)
也就是在这里的 this 就会是指 google.maps 这个元件了