对《javascript 杂谈之哪种写法你更喜欢?》最后一种“匿名函数法”的解释

前两天看了篇不错的关于javascript写法的文章。在评论里,不少人表示看不懂最后一种方法,作者也没详细说明,于是我顺势解说,算是沾点人气。

代码如上图,整体结构模仿jQuery,代码不长,知识点较多,信息量很大,我们分两部分,逐行解释。

第一部分

第一部分中,我们把extend相关的方法抽离,剩余代码如下:

(function () {
        var yQuery = (function () {
            var yQuery = function () {
                return yQuery.fn.init();
            };

            yQuery.fn = yQuery.prototype = {
                init: function () {
                    return this;
                }
            };
            return yQuery;
        })();
        window.yQuery = window.$ = yQuery();
    })();

知识点1:无引用的匿名函数调用

(function() {
    })();

这种写法作用是声明并执行一个方法,等同于:

function Test() {
    }
    Test();

知识点2:属性变量无需声明

var obj = new Object();
 obj.name = "abc";

obj并没有name属性,但无需声明就可以使用,初始值为undefined。上例中yQuery.fn 就没有声明。

知识点3:{}二义性,相当于创建一个对象。

var obj = new Object();
var obj = { };

在js中,{}除了可作为复合语句边界以外,还有创建一个空对象的作用,因此上面这两句相同。而在例子中用到的情况如下:

        {
            init: function () {
                return this;
            }
        };

这段代码猛一看像方法,实质是一个包含了init方法的对象,而方法中的this指向这个对象本身。

知识点4:连等表达式

var a = b = 1;

这个比较好理解,相当于对他们分别赋同一个值。在上例中,yQuery.fn就用到了这个写法。

知识点5:原型继承prototype

yQuery.fn = yQuery.prototype = {
                init: function () {
                    return this;
                }
            };

例子中,通过连等分别对yQuery.fn和yQuery.prototype赋值给了同一个对象。而fn的作用只是一个别名,只为书写方便,重点是给prototype赋值,为什么要给它赋值?在本例中无法解释。

在jQuery中,init方法会返回不同对象,而本例中永远返回同一个对象,因此这里prototype没有多大意义。至于jQuery为什么要用prototype,算是题外话了,有兴趣的可点这里

第一部分代码含义

这段代码第二行yQuery和第三行的yQuery是两个变量,因名字相同,所有很有迷惑性。整段代码意思就是:yQuery.prototype指向了一个包含init方法的对象,prototype有个别名fn,可通过yQuery.fn.init()返回这个对象,最后把这个对象赋值给window.$和window.yQuery属性。

第二部分

看完了第一部分,第二部分就相对简单了,代码如下:

yQuery.extend = yQuery.fn.extend = function () {
                var options, name, src, copy,
                    target = arguments[0] || {},
                    i = 1,
                    length = arguments.length;
                if (length === i) {
                    target = this;
                    --i;
                }

                for (; i < length; i++) {
                    if ((options = arguments[i]) != null) {
                        for (name in options) {
                            src = target[name];
                            copy = options[name];

                            if (src === copy) {
                                continue;
                            }
                            if (copy!==undefined) {
                                target[name] = copy;
                            }
                        }
                    }
                }
                return target;
            };

知识点1:函数中的arguments变量

函数内部会自带一个arguments变量,该变量记录传入的参数,从左至右分别是arguments[0],arguments[1]等,js奇怪的地方在于,你声明了一个无参函数,在调用的时候依然可以传入参数,比如:

function NoArg() {
        console.log(arguments[0]);
        console.log(arguments[1]);
        console.log(arguments[2]);
    }
    NoArg(1, 2, "a");

该例NoArg调用时,会正常显示传入参数。

知识点2:结果类型不确定的逻辑运算

js中,所有类型都可以进行逻辑判断(true或false),js会将值转化为布尔值,但并不改变原值。如:

var str = "a";
    if(str) {
    }

此处的str为true,该特性与逻辑运算符”||”和”&&”结合形成了js一大特点,代码如下:

var str = "a";
var num = 1;
var x = str || num; //x="a"
var y = str && num; //y=1;

js支持“逻辑短路”,所谓逻辑短路是指:

  1. 在”||” 运算中,第一个条件符合就结束判断。
  2. 在”&&”运算中,第一个条件不符合就结束判断。

因此,”str || num”的str为true,则结束判断,返回str。”str&&num”的str为true,则继续判断num,num为true,则返回num。在本文案例中,有几个地方用到了这个特性:

target = arguments[0] || {}

容易看出,如果arguments[0]有值则返回该值,不然就通过{}返回一个空的对象。还有一处在图片中有,我文中没有打出来的代码:

$.ui = $.ui || { };

知识点3:数组方式访问对象属性

var obj = new Object();
obj.name = "a";
obj["name"] = "a";

最后两行代码等效。

第二部分代码含义

这部分代码可简单描述为:定义一个方法,将参数1之外的所有参数的属性成员赋值给参数1。我把循环部分修改一下,能更容易看懂,代码如下:

for (; i < length; i++) {
        if ((options = arguments[i]) != null) {
            for (var name in options) {
                if (options[name] !== undefined) {
                    target[name] = options[name];
                }
            }
        }
    }

结语

js中有不少语法和运算符存在二义性,这导致js代码显的混乱难懂,所以不少人骂js是一个2B的语言,我觉得也不无道理。不过随着js的应用范围越来越广泛,终究避不开它,因此骂归骂,学还是要学的。

我是看了周爱民老师的《JavaScript语言精髓与编程实践(第2版)》后才算对js真正入门,饮水思源,推荐此书。

 

posted @ 2012-05-04 01:48 许两会 阅读(...) 评论(...) 编辑 收藏