Serenader

Learning by sharing.

(function(window, undefined){})(window)这种写法的原理

在看一些 jQuery 插件的时候经常会看到这样的写法:

(function(window, undefined){
...
//code goes here
})(window)

或者这样的:

(function($, window, undefined){
...
//code goes here
})(jQuery, window)

其实上面两个例子从根本上讲是一样的。

为何要在匿名函数中传入 $windowundefined 形参呢?

先来说说前两个形参。

JavaScript 的解析器解析代码其实是从里到外解析的,也就是说,解析器会先解析函数内部的代码,然后再解析函数外部的代码。这样的话,如果我们在函数内部引用了 $ 或者 window 对象的话,每一次引用解析器都要跑到函数外面去查找其相应的对象。为了使得解析效率更高,有高人想出了这种写法: 把 jQuerywindow 作为参数传递进去。也就是我们上面的例子了。上面的例子是匿名自执行函数,当函数定义好之后立即执行,然后将 jQuerywindow 作为参数传递进去。这样一来在函数内部就可以直接引用 jQuerywindow 了,而不用再从函数外部查找其对象。

来看几个例子:

(function () {
    window.property1 = 1;
    window.property2 = 2;
    window.property3 = 3;
    ...
})();

(function () {
    var tmp = window;
    tmp.property1 = 1;
    tmp.property2 = 2;
    tmp.property3 = 3;
    ...
})();

(function (window) {
    window.property1 = 1;
    window.property2 = 2;
    window.property3 = 3;
    ...
})(window);

上面三个例子其实做的都是同一件事情,即为 window 对象添加属性。但是三者效率有些差别。第一种就是最普通的方法,即直接在函数内部调用 window 对象,函数没有传递参数。第二种则是在函数内部先缓存了 window 对象,然后每次需要调用 window 对象时直接调用这个 tmp 。第一个例子中的函数内部如果又语句引用了 window 对象,解析器都要从函数外部查找这个对象,因为 window 对象是全局对象,不在函数内部定义。而第二个例子先把 window 对象保存在一个局部变量 tmp 中,这样方便后面的引用。从效率来讲,第二种方法会比第一种方法快得多,因为第二种方法只需从外部查找一次 window 全局变量。之后每次需要引用 window 对象时可以直接引用其自身的局部变量。引用局部变量自然会比引用全局变量快得多,因为解析器是由里到外查询变量的。

然后第三个例子其实就是我们所讲的方法。其效率应该和第二个例子差不多。所以以后再写代码的时候尽可能按照这种方法去写,可以提高脚本运行效率。

最后面的形参 undefined 又是怎么回事呢?

原来在 JavaScript 中 undefined 并不是作为一个关键字存在的。换句话说,我们可以给 undefined 赋值,而且不会出错。看例子:

var undefined = 1;  
alert(undefined);//1  

从例子可以看出 undefined 是可以认为修改它的值的。在一些插件或者代码中我们多多少少会引用到 undefined 这个对象。那么如果在全局环境中 undefined 被修改了它的值的话,那么插件或者代码可能就会导致意想不到的错误。为了避免由于重写 undefined 的值而带来的麻烦,又有高人想出了这种解决方法,其实就是上面第一个例子。把 undefined 作为形参传递进入,然后执行的时候不传递值。这样做会导致什么后果?

由于执行的时候没有给 undefined 传递值,那么在函数内部 undefined 对象的值刚刚好就是我们所想要的 undefined !来看例子:

var undefined = 1;  
(function (undefined){
    alert(undefined);//undefined
})();

结果为 undefined ,表明我们的目的达到了。这样就能避免函数内部不受外部变量的干扰,使得 undefined 对象的值永远为 undefined


类似这种例子的还有我们经常碰到的,就是在 for 循环语句中的。看例子:

var arr = [1,2,3,4,5,6,7,8,9,10];  
for( var i = 0; i < arr.length; i++) {  
    ...//code goes here
}

相信这种写法大家多多少少会接触到。其实这也是效率低的一种体现。因为每次循环解析器队徽比较 iarr.length 的大小,而每次引用 arr.length 解析器都会重新计算一次 arr 数组的长度。所以说,以上代码运行的时候其实会访问 arr 数组10次。但是很明显我们并不想这样,因为这样完全没必要,浪费性能。所以才有了下面的这种写法:

var arr = [1,2,3,4,5,6,7,8,9,10];  
for( var i = arr.length; i > 0; i--) {  
    ...//code goes here
}

var arr = [1,2,3,4,5,6,7,8,9,10];  
for( var i = 0, l = arr.length; i < l; i++) {  
    ...//code goes here
}

上面的例子其实都是一个意思,都是在循环体内部先缓存了 arr.length , 这样的好处是需要引用到这个对象的时候不用再去计算 arr 的长度了,而是可以直接引用变量,减少了访问 arr 的次数从而提升了性能。这种方法在实际代码中效率可以高出很多。所以优化代码的执行性能还是非常有必要的。

完。

Comments is loading...

Comments is loading...