jquery源码中的(function(window, undefined){})(window)

Posted 方寸之间

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery源码中的(function(window, undefined){})(window)相关的知识,希望对你有一定的参考价值。

(function( window, undefined ) {})(window);
这个,为什么要将window和undefined作为参数传给它?

(function( $, undefined ) {})(jQuery); 同理

因为 ecmascript 执行JS代码是从里到外,因此把全局变量window或jQuery对象传进来,就避免了到外层去寻找,提高效率。undefined在老一辈的浏览器是不被支持的,直接使用会报错,js框架要考虑到兼容性,因此增加一个形参undefined。

还有,不要用window.undefined传递给形参,有可能window.undefined被其他人修改了,最好就是甚么都不传,形参的undefined就是真正的undefined了。

Js代码 : 
  1. var undefined = 8;  
  2. (function( window ) {   
  3.     alert(window.undefined); // 8  
  4.     alert(undefined); // 8  
  5. })(window);  

 

Js代码 : 
  1. var undefined = 8;  
  2. (function( window, undefined ) {   
  3.     alert(window.undefined);  // 8  
  4.     alert(undefined); // 此处undefined参数为局部的名称为undefined变量,值为undefined  
  5. })(window);  

区分上述两种方式:第一种每个语句都要去找一次window。第二种将window作为参数传递过去,是的不要每个语句都去找window,应该是提高了效率。 所以后者,就算外面的人把 undefined 定义了,里面的 undefined 依然不受影响。大概是为了最大程度防止外界的变量定义对所做封装的内部造成影响吧。

 原文参考自站长网http://www.software8.co/wzjs/JavaScript/2525.html

Js代码:  
  1. //方式一  
  2. (function(undefined ) {  
  3.    window.property1 = ……;  
  4.    window.property2 = ……;  
  5.    ……  
  6. })();  
  7. //方式二  
  8. (function( window, undefined ) {  
  9.     ... // code goes here  
  10.   
  11. })(window);  
  12. //方式三  
  13. (function(undefined ) {  
  14.    var tmp = window;  
  15.    tmp.property1 = ……;  
  16.    tmp.property2 = ……;  
  17.    ……  
  18. })();  

方式一的效率明显最低,方式二和方式三应该差不多。将window作为参数传递进去就可以让代码里面的语句可以直接用参数中的window,而不用再去找最外层的对象。假如要在函数中为window再设置 100000个属性,用参数传递过去只需要找一次最外层对象。不用参数传递,用到window的语句都要去找一次最外层对象。

 

 

function ($, undefined){ })(jQuery)

 
规避用户对undefined进行定义,致使函数发生异常
 
(function ($, undefined){ })(jQuery)
如果用户
 
var undefined =xiaoyan;
(function ($, undefined){ })(jQuery) //这里就可以传个undefined的形参,避免上面的定义,只要没传值进去,undefined就不会被赋值

以上是关于jquery源码中的(function(window, undefined){})(window)的主要内容,如果未能解决你的问题,请参考以下文章

写一个mini的JQuery

jQuery源码解析----内部插入的外部函数

jQuery源码分析-02构造jQuery对象

jQuery源码分析-03构造jQuery对象-源码结构和核心函数

jQuery源码解析之on事件绑定

jquery源码学习笔记(二十四)