這段程式要這麼拆解: (看下面的上色)
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 這個元件了