摘要:比如函数执行作用一函数内部是隔离的区域函数执行过程中,如果能在参数处找到那么就不会去全局作用域中找,所以结果就是效率高,提升性能。结论作为实参的用意提高性能方便代码压缩。作为形参的用意防止的值被修改早期的低版本浏览器中。
本文行文流程
两个大的信息来源:teacher与segmentfault论坛,以此分为两大板块
第一大板块:一个普通的自调用函数==》加了各种参数的自调用函数==》参数的两个作用==》类比到jQuery的源代码封装==》结论
第二大板块:论坛的问题==》论坛的被采纳的回答==》简易版的回答,回答中解释了为什么要加上window,jquery,undefined.
From Teacher演变历程
1.原函数
(function(){ console.log(1) })()
2.加window参数
(function(window){ console.log(window) })(window)
此时的window不是全局变量,而是局部变量,虽然去打印的话,出来的效果是一样的。
形参的位置可以是其他任意字符,反正传进去的实参是window。
比如:
(function(w){ console.log(w) })(window)
3.函数执行-------作用一
(function(window){ //函数内部是隔离的区域 console.log(window) })(window)
函数执行过程中,如果能在参数处找到window,那么就不会去全局作用域中找,所以结果就是:效率高,提升性能。(效率高==提升性能,多了一句废话,但是也有助于理解)
4.代码压缩-------作用二
(function(w){ //函数内部是隔离的区域 console.log(w) })(window)
说明:代码打包上传的时候,或者说代码发布的时候,也就是网站上线的时候,代码会被压缩,此时本来的形参是window,会被压缩成一个字符w,这样字符变少了,就节省了空间。
5.是否可以不添加?自然是可以的
(function(){ //函数内部是隔离的区域 console.log(window) })()
说明:此时没有传window实参,形参也没有传,但是内部依然可以访问到window,因为window是全局变量,在哪里都可以访问到。
注意:此时寻找window去全局作用域中找,所以效率低一些;并且压缩的时候window不会被压缩,因为压缩了浏览器就不认识了啊,没法解析了,所以这样的参数就没法压缩。
类比到jQuery
jQuery的封装:jQuery源代码的最外层就是这样做的
1.jQuery源代码的最外层就是这样做的:传入window与undefined
(function(window,undefined){ //函数内部是隔离的区域 console.log(window) })(window)
2.一个事实:早期的浏览器中undefined可以修改,新版本浏览器不能修改了
undefined=123; console.log(undefined);//结果是123;现在的结果还是undefined
3.jQuery源代码做法的优点:
更严谨,不论是什么浏览器,里边的undefined都不会被更改。因为函数寻找的时候会优先找到作为参数传过来的undefined,而不会去全局找。
结论小心得:学任何技术不要局限于怎么用,而要刨根问底的看是怎么实现的。这样进步会更快。
window作为实参的用意:提高性能;方便代码压缩。
undefined作为形参的用意:防止undefined的值被修改(早期的低版本浏览器中)。最新的浏览器已经把这个bug修复了。
问题:像下边这样的代码为什么要把window, jQuery对象传进去
(function (window, $, undefined) { play=function(){ $("#demo").val("This is a demo."); } window.wbLogin = play; })(window, jQuery);1 论坛被采用的回答
为什么要传入 jQuery
通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间。这点非常有用也是一个 JS 框架必须支持的功能,jQuery 被应用在成千上万的 JavaScript 程序中,必须确保 jQuery 创建的变量不能和导入他的程序所使用的变量发生冲突。
为什么要传入 window
通过传入 window 变量,使得 window 由全局变量变为局部变量,当在 jQuery 代码块中访问 window 时,不需要将作用域链回退到顶层作用域,这样可以更快的访问 window;这还不是关键所在,更重要的是,将 window 作为参数传入,可以在压缩代码时进行优化,看看 jquery-1.6.1.min.js:
(function(a,b){})(window); // window 被优化为 a
为什么要传入 undefined
在自调用匿名函数的作用域内,确保 undefined 是真的未定义。因为 undefined 能够被重写,赋予新的值。
undefined = "now it"s defined";
alert( undefined );
浏览器测试结果:
浏览器 测试结果 结论
ie11 undefined 不能改变
firefox22 undefined 不能改变
chrome31 undefined 不能改变
opera12 undefined 不能改变
一句话,使全局变量以参数形式变成自执行函数内部的局部变量。
至于为什么这么做,提高程序效率。为什么能提高效率,得从javascript的机制说起,所谓的scope chain作用域链,在当前作用域中如果没有该属性(局部变量)则向上一层作用域中寻找,一直到最上层,也就是window。也就是说全局变量和下级作用域都是window的一个属性,向下依此类推。
另外jQuery传入后将参数写成$可以保证在此函数内$为jquery而不是其他类似使用$符号的库。
undefined同理,由于没有传入第三个参数,自然就是undefined。由于javascript中undefined是一个变量,可以被改变,所以这样可以保证undefined判断时的准确性。有时判断时使用typeof xxx === "undefined"也是因为这个原因。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82876.html
摘要:情况构造函数所谓构造函数就是用来对象的函数。另外注意,构造函数的函数名第一个字母大写规则约定。闭包但是你只需要知道应用的两种情况即可函数作为返回值,函数作为参数传递。如上代码,函数作为返回值,赋值给变量。这就是需要理解闭包的核心内容。 原文链接http://www.cnblogs.com/wangfupeng1988/p/3977924.html 对象是属性的集合。 function ...
摘要:普通函数调用函数在全局作用域下运行在非严格模式下,指向全局对象,在严格模式下,会变成。使用来调用函数,或者说发生构造函数调用时,会自动执行下面的操作。即构造函数的指向它实例化出来的对象。 JavaScript中的this实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。 先来列举一下都有哪些函数调用方式: 普通函数调用 对象方法调用 call()、apply()...
摘要:用伪代码来表示函数未进入执行阶段之前,变量对象中的属性都不能访问但是进入执行阶段之后,变量对象转变为了活动对象。全局上下文中,变量对象就是本身。函数上下文中,变量对象包括函数声明,变量声明。 概述 JavaScript 的可执行代码,具有执行上下文,而每个上下文包括以下 3 个属性: 变量对象(variable object, 简称 VO) 作用域链(scope chain) thi...
摘要:虽然会输出,但是这只是存在的一个悠久。在的最初版本中使用的是位系统,为了性能考虑使用低位存储变量的类型信息,开头代表是对象,然而表示为全零,所以将它错误的判断为。 参考来源: JavaScript高级程序设计: book.douban.com/subject/105… 千古壹号: github.com/qianguyihao… 小册前端面试之道: juejin.im/book/5bdc71…...
阅读 3828·2023-04-26 00:36
阅读 2646·2021-11-16 11:44
阅读 1064·2021-11-15 17:58
阅读 1643·2021-09-30 09:47
阅读 1194·2019-08-30 13:05
阅读 1492·2019-08-30 12:55
阅读 2394·2019-08-30 11:02
阅读 2651·2019-08-29 17:01