Ajax 板


LINE

這段程式要這麼拆解: (看下面的上色) 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 這個元件了 -- 有人喜歡邊玩遊戲上逼; 也有人喜歡邊聽歌打字。 但是,我有個請求, 選字的時候請專心好嗎? -- 改編自「古 火田 任三郎」之開場白 --



※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 123.195.39.85
※ 文章網址: http://webptt.com/m.aspx?n=bbs/Ajax/M.1408974424.A.956.html
1F:推 MangoTW: 推詳解 08/26 01:00
2F:推 leochen0818: 推詳解,雖然以我的LEVEL還不太能理解XD 08/26 09:56
3F:→ alair99: 很詳細唷,謝謝大大 m(_ _)m 08/27 12:09
4F:推 shvanta: 原來那個this是這樣來的,按照以前想法我以為是指向global 10/20 14:00
5F:→ shvanta: 感謝詳細說明! 10/20 14:00







like.gif 您可能會有興趣的文章
icon.png[問題/行為] 貓晚上進房間會不會有憋尿問題
icon.pngRe: [閒聊] 選了錯誤的女孩成為魔法少女 XDDDDDDDDDD
icon.png[正妹] 瑞典 一張
icon.png[心得] EMS高領長版毛衣.墨小樓MC1002
icon.png[分享] 丹龍隔熱紙GE55+33+22
icon.png[問題] 清洗洗衣機
icon.png[尋物] 窗台下的空間
icon.png[閒聊] 双極の女神1 木魔爵
icon.png[售車] 新竹 1997 march 1297cc 白色 四門
icon.png[討論] 能從照片感受到攝影者心情嗎
icon.png[狂賀] 賀賀賀賀 賀!島村卯月!總選舉NO.1
icon.png[難過] 羨慕白皮膚的女生
icon.png閱讀文章
icon.png[黑特]
icon.png[問題] SBK S1安裝於安全帽位置
icon.png[分享] 舊woo100絕版開箱!!
icon.pngRe: [無言] 關於小包衛生紙
icon.png[開箱] E5-2683V3 RX480Strix 快睿C1 簡單測試
icon.png[心得] 蒼の海賊龍 地獄 執行者16PT
icon.png[售車] 1999年Virage iO 1.8EXi
icon.png[心得] 挑戰33 LV10 獅子座pt solo
icon.png[閒聊] 手把手教你不被桶之新手主購教學
icon.png[分享] Civic Type R 量產版官方照無預警流出
icon.png[售車] Golf 4 2.0 銀色 自排
icon.png[出售] Graco提籃汽座(有底座)2000元誠可議
icon.png[問題] 請問補牙材質掉了還能再補嗎?(台中半年內
icon.png[問題] 44th 單曲 生寫竟然都給重複的啊啊!
icon.png[心得] 華南紅卡/icash 核卡
icon.png[問題] 拔牙矯正這樣正常嗎
icon.png[贈送] 老莫高業 初業 102年版
icon.png[情報] 三大行動支付 本季掀戰火
icon.png[寶寶] 博客來Amos水蠟筆5/1特價五折
icon.pngRe: [心得] 新鮮人一些面試分享
icon.png[心得] 蒼の海賊龍 地獄 麒麟25PT
icon.pngRe: [閒聊] (君の名は。雷慎入) 君名二創漫畫翻譯
icon.pngRe: [閒聊] OGN中場影片:失蹤人口局 (英文字幕)
icon.png[問題] 台灣大哥大4G訊號差
icon.png[出售] [全國]全新千尋侘草LED燈, 水草

請輸入看板名稱,例如:BabyMother站內搜尋

TOP