匿名函数和call以及return的问题. ().call(this);

Question

前几天在一个著名网站看到一个有趣的效果,然后自己着手试了试.之后看了页面的原码,被代码的简短和精细吓到(也可能是少见多怪).
代码大致如下:

(function() {
    $(function() {
        return $(".XXXX-XX").click(function() {
            return $(this).parent(".XXX").toggleClass("new");
        });
    });
}).call(this);

虽然代码的写法都很熟悉,可是仔细看了之后又觉得好陌生.问题集中在:
1. (function(){/**function body**/}).call(this)是怎么执行的?这样写有什么好处?
2. 2个return的作用,为什么要return?,return了什么?.

Answer 1

这段代码极有可能是由 coffee 编译过来的 特点是外层的包裹匿名函数和看似没必要的return

• 匿名函数包裹是为了命名空间 防止全局变量污染

• 看似没必要的 return 是因为 coffee 函数中如果不手动指定 会默认 return 最后一行代码

Answer 2

个人理解, 如有误, 请指出.

(function(){/**function body**/}).call(this)是怎么执行的?这样写有什么好处?
这是Javascript的自执行函数写法, 函数声明后立即执行. 并且设置函数执行时context为this, 这里的this因执行环境会有所不同, 浏览器环境应该是window.
但是看这代码没必要用个call(this), 感觉下面的写法就可以了:

(function() {
    $(function() {
        return $(".XXXX-XX").click(function() {
            return $(this).parent(".XXX").toggleClass("new");
        });
    });
})();

2个return的作用,为什么要return?,return了什么?.
两个return也是可以不存在的, 不管里return了什么, 没人接收你的return值, 何必return呢?

Answer 3

这个代码，看的好不自在,我觉得.call(this)没必要用，自执行的话直接(function(){})()就行咯，而且我觉得连自执行都多余了..个人觉得了解语法结构就行，不要模仿这样的写法，这么多的语句跟下面的这段效果都是一样的。

     $(function(){
        $(".XXXX-XX").click(function() {
           $(this).parent(".XXX").toggleClass("new");
     })   

Answer 4

call()本来就是执行函数，更改函数的作用域的。

Answer 5

http://segmentfault.com/q/1010000002519489 这里有答案，区别是严格和非严格模式下，函数内this的指向问题。