前两天看了篇不错的关于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支持“逻辑短路”,所谓逻辑短路是指:
- 在”||” 运算中,第一个条件符合就结束判断。
- 在”&&”运算中,第一个条件不符合就结束判断。
因此,”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真正入门,饮水思源,推荐此书。