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