Re: [問題] 請問return function的意義

作者: LPH66 (-6.2598534e+18f)   2014-08-25 21:47:01
這段程式要這麼拆解: (看下面的上色)
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 這個詞中文譯做「閉包」, 詳細解釋可以看中文維基

這裡 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 這個元件了
作者: MangoTW (不在線上)   2014-08-26 01:00:00
推詳解
作者: leochen0818 (Leo)   2014-08-26 09:56:00
推詳解,雖然以我的LEVEL還不太能理解XD
作者: alair99 (I think home)   2014-08-27 12:09:00
很詳細唷,謝謝大大 m(_ _)m
作者: shvanta (vant)   2014-10-20 14:00:00
原來那個this是這樣來的,按照以前想法我以為是指向global感謝詳細說明!

Links booklink

Contact Us: admin [ a t ] ucptt.com