(function (window, document, undefined) {})(window, document)的真正含义
管理员组 admin 发表于 2019-03-09 02:39:24 115

原文地址:What (function (window, document, undefined) {})(window, document); really means

 

按原文翻译

 

在这篇文章中,我们将探讨标题所暗示的内容,并解释自调用函数设置给我们带来了什么。

有趣的是,我被问到关于IIFE(即时调用的函数表达式)的很多,它采用以下设置:

(function (window, document, undefined) {   //  })(window, document);

 

那么为什么不写一篇关于它的文章呢? :-)

首先,这是一系列不同的事情。从顶部:

JavaScript具有函数作用域,因此首先创建了一些需要的“私有范围”。例如:

复制代码

(function (window, document, undefined) {   var name = 'Todd'; })(window, document); console.log(name); //name is not defined,它在一个不同的范围内

复制代码

Simple.

 

一个正常函数是这样的:

复制代码

var logMyName = function (name) {   console.log(name); }; logMyName('Todd');

复制代码

我们可以选择调用它,在任何我们需要/想的位置。

 

“IIFE”之所以被创造出来是因为它们是直接调用的函数表达式。

这意味着它们在运行时被立即调用,

我们也不能再调用它们了,它们只运行一次:

var logMyName = (function (name) {   console.log(name); // Todd })('Todd');

这里的秘诀是,(我在前面的例子中给一个变量赋值):

(function () {    })();

多余的一对括号是必要的,因为这样不起作用:

function () {    }();


虽然可以通过一些技巧来欺骗JavaScript“使其工作”。
这样强制JavaScript解析器处理 ! 后面的代码:

!function () {    }();

还有其他的变体:

复制代码

+function () {    }(); -function () {    }(); ~function () {    }();

复制代码


但我不会用它们。

请参阅@ mariusschulz分解JavaScript的IIFE语法,详细解释IIFE语法及其变体。

https://blog.mariusschulz.com/2016/01/13/disassembling-javascripts-iife-syntax

 

现在我们知道了它是如何运作的,我们可以将论证传递给我们的 IIFE:

(function (window) {    })(window);

它是如何工作的呢?
记住, (window); 是调用函数的地方,
我们通过窗口对象。
然后这个函数被传递到函数中,我也把它命名为window。
你可以认为这是毫无意义的,因为我们应该给它命名不同的东西,但是现在我们也将使用窗口。

 

我们还能做什么呢?把所有的东西都传过去!让我们通过文档对象:

(function (window, document) {   // 我们通常需要 window 和 document  })(window, document);

 

那么关于 undefined 呢?

在ECMAScript 3中,未定义的是可变的。

这意味着它的值可以被重新分配,比如undefined = true;

oh my! 幸运的是,在 ECMAScript 5 中的 ('use strict';)语法将会抛出一个错误告诉你你是一个白痴。

在此之前,我们开始保护自己的 IIFE:

(function (window, document, undefined) { })(window, document);

也就是说,如果有人来做这件事,我们会没事的:

undefined = true; (function (window, document, undefined) {   // undefined 是一个局部未定义的变量 })(window, document);

缩小局部变量是IIFE模式的神奇之处。
如果传入的是局部变量名,
所以我们可以随意的命名。

复制代码

(function (window, document, undefined) {   console.log(window); // Object window })(window, document); (function (a, b, c) {   console.log(a); // Object window })(window, document);

复制代码

想象一下,你对函数库、window 和 document 的所有引用都很好地缩小了。
当然你不需要停下来,
我们也可以通过jQuery,或者在词汇范围内可以使用的方法:

复制代码

(function ($, window, document, undefined) {   // use $ to refer to jQuery   // $(document).addClass('test'); })(jQuery, window, document); (function (a, b, c, d) {   // becomes   // a(c).addClass('test'); })(jQuery, window, document);

复制代码

这也意味着您不需要调用jQuery.noConflict();
或者任何东西作为$被分配到模块的本地。
了解范围和全局/局部变量如何工作将进一步帮助您。

 

还剩下一小段,不想看了,饿了。感觉好像被塞了一把JS的知识。

原因只是我想知道这样一段代码什么意思。

复制代码

(function (angular) {     'use strict';     //do something      })(window.angular);

复制代码


最新回复 (1)
  • admin 发表于 2019-03-09 03:17:22
    引用 2


    js中,(function(){})()的用法解析

     

     

    (function($){...})(jQuery)  含义

    经常用,今天总结一下,下文摘自某网友的总结:

    (function($){...})(jQuery)实际上是匿名函数,不懂得朋友可以继续往下看。

    这里实际上是匿名函数 function(arg){...} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即: (function(arg){...})(param) 这就相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数 而(function($){...})(jQuery)则是一样的,之所以只在形参使用$,是为了不与其他库冲突,所以实参用jQuery var fn = function($){....}; fn(jQuery);

    (funtion(){})();立即执行函数;相当于先申明一个函数,声明完后直接调用;如果参数如:
    (funtion(str){alert(str)})("output"));相当于:funtion OutPutFun(str){alert(str);};OutPutFun("output");

     

     

     

     

     

    最近在整理

    javascript

    学习,发现这个问题了

     

    ,在网上发现这么个解释

     

    最清

     

    最明白

     

     

    (function(){})()

    相当于先定义

     function xx(){}

    ,后调用

     xx();

    ()

    是最高优先级的,所以先执行

    function(){}

     

    这个定义了一个匿名函数,等于

    xx=function(){}

    接着就是调用

    xx()

    ;

    给个例子

     

    JScript code

    functionf1(a)

     

      

    {

     

     alert(a);

     

      

     

     

     

     

     

    }

     

     functionf2(a)

     

    {

     

     

     returnfunction(){

    alert(a);

    }

     

      

     

     

     

     

    }

     

    这里的

    var x=f2

    就等于把函数传递给了

    f2,

    然后要执行这个函数

    ,

    就必须加

    ()

    也就是

    x();

    也就是

    f2()  

    还是

    (function f2(a){

     

      return function(){

     

      alert(a); 

     

     })();

     

    另外还有一个问题

     

    就是命名空间的问题

     

    YY = YY||{};---

    声明一个叫

    YY

    的命名空间(定义一个全局的变量)

     

    (function() {

     

    YY.Lang=function()

    {------

    声明一个叫

    YY.Lang

    的命名空间

    (通过全局变量的

    增加属性的方式把闭包里的对象传到全局变量中,实现代码封装的效果)

     

    isUndefined: function(o) {

     

      return typeof o === 'undefined';

     

      },

     

    isString: function(o) {

     

      return typeof o === 'string';

     

      }

     

    };

     

     

    })();

     

     

    ---

    调用方法

     

    alert(YY.Lang.isString('test me'));

     

     

    这时候就有人不明了,

    楼上为什么要加

    (function()

    {

    )();

    最外面的这两行,

    有什么用啊?

     

     

     


     

    J

    Script code

     

    YY=YY||{};

    //---

    声明一个叫

    YY

    的命名空间(定义一个全局的变量)

     

    //(

     

    function()

    {

    YY.Lang=function()

    {

     

    //------

    声明一个叫

    YY.Lang

    的命名空间

    (通过全局变量的增加属性的方式把闭包里的对象传

    到全局变量中,实现代码封装的效果)

     

    isUndefined:function(o)

    {returntypeofo==='undefi

    ned';

    },

     

     isString:function(o)

    {returntypeofo==='string';

    }

    };

    }

     

     

    //)();

     

    //---

    调用方法

     

     alert(YY.Lang.isString('test

    me'));  

     

    疑问在这:??????

     

     

     

    注释掉这两行有什么不一样的呢?不就是申明吗,为什么要用

    ()()执行一下啊?

     

    答:

     

    (

    function(){})()

    意思是立即执行前一个括号里的

    function

    ,相当于是一个匿名函数

    ;

    由于里面

    的代码的执行,

    定义了

    YY.Lang

    这个对象,

    所以可以执行

    alert(YY.Lang.isString('test

    me'));

    调用

    isString

    方法。

     

    但是,如果按照你写的

    functionaa(){..};//

    只是定义了一个叫

    aa的函数,但是并没有执行


    alert(YY.Lang.isString('test

    me'));//

    执行的时候会报找不到

    isString

    的方法。

    这么写有什么好处??????????????

    (function{})()

    的写法有个好处,就是能很好的利用

    javascript
    的变量的可见范围为执行脚本

    时节省空间。例如以下写法

    1和写法2达到的目的是一样的,但是写法1的由于a变量的

    可见范围只是在匿名函数体内,

    所以a

    在执行完这个匿名函数后就释放空间了。

    但是写法2

    会一直存在该页面中。

     

    写法

    1

     

    JScript

    code

     

    (function(){vara=2;

    alert(a);

    })();

     

     

    写法

    2

     

    JScript

    code

     

    vara=2;

    alert(a);