【JavaScript】window与undefined作为参数的作用

legendmohe 发布于2019-08-20 16:21 / 1126人阅读

摘要：比如函数执行作用一函数内部是隔离的区域函数执行过程中，如果能在参数处找到那么就不会去全局作用域中找，所以结果就是效率高，提升性能。结论作为实参的用意提高性能方便代码压缩。作为形参的用意防止的值被修改早期的低版本浏览器中。

本文行文流程

两个大的信息来源：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修复了。

From 论坛

问题：像下边这样的代码为什么要把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 不能改变

2 论坛简易版本回答

一句话，使全局变量以参数形式变成自执行函数内部的局部变量。

至于为什么这么做，提高程序效率。为什么能提高效率，得从javascript的机制说起，所谓的scope chain作用域链，在当前作用域中如果没有该属性（局部变量）则向上一层作用域中寻找，一直到最上层，也就是window。也就是说全局变量和下级作用域都是window的一个属性，向下依此类推。

另外jQuery传入后将参数写成$可以保证在此函数内$为jquery而不是其他类似使用$符号的库。

undefined同理，由于没有传入第三个参数，自然就是undefined。由于javascript中undefined是一个变量，可以被改变，所以这样可以保证undefined判断时的准确性。有时判断时使用typeof xxx === "undefined"也是因为这个原因。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82876.html

js面试题

摘要：面试题的基本数据类型和引用数据类型基本数据类型引用数据类型和有何区别表示一个对象被定义了，值为空值表示不存在这个值。 js面试题 JS的基本数据类型和引用数据类型基本数据类型：undefined、null、boolean、number、string、symbol引用数据类型：object、array、function null 和 undefined 有何区别？ null 表示一个对...

Baoyuan 2019-08-23 18:35 评论0 收藏0
深入理解javascript原型和闭包

摘要：情况构造函数所谓构造函数就是用来对象的函数。另外注意，构造函数的函数名第一个字母大写规则约定。闭包但是你只需要知道应用的两种情况即可函数作为返回值，函数作为参数传递。如上代码，函数作为返回值，赋值给变量。这就是需要理解闭包的核心内容。原文链接http://www.cnblogs.com/wangfupeng1988/p/3977924.html 对象是属性的集合。 function ...

_ang 2019-08-21 10:51 评论0 收藏0
JavaScript中this总结

摘要：普通函数调用函数在全局作用域下运行在非严格模式下，指向全局对象，在严格模式下，会变成。使用来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。即构造函数的指向它实例化出来的对象。 JavaScript中的this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。先来列举一下都有哪些函数调用方式：普通函数调用对象方法调用 call()、apply()...

ghnor 2019-08-22 11:15 评论0 收藏0
JavaScript之变量对象

摘要：用伪代码来表示函数未进入执行阶段之前，变量对象中的属性都不能访问但是进入执行阶段之后，变量对象转变为了活动对象。全局上下文中，变量对象就是本身。函数上下文中，变量对象包括函数声明，变量声明。概述 JavaScript 的可执行代码，具有执行上下文，而每个上下文包括以下 3 个属性：变量对象（variable object, 简称 VO）作用域链（scope chain） thi...

codeGoogle 2019-08-23 12:23 评论0 收藏0
JavaScript学习笔记(一)

摘要：虽然会输出，但是这只是存在的一个悠久。在的最初版本中使用的是位系统，为了性能考虑使用低位存储变量的类型信息，开头代表是对象，然而表示为全零，所以将它错误的判断为。参考来源: JavaScript高级程序设计: book.douban.com/subject/105… 千古壹号: github.com/qianguyihao… 小册前端面试之道: juejin.im/book/5bdc71…...

pingan8787 2019-05-23 16:28 评论0 收藏0