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

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

(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了什么?.

阅读 10.7k
5 个回答

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

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

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

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

(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呢?

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏