JS (function (window, document, undefined) {})(window, document)的真正含义

原文地址: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);

原文地址:https://www.cnblogs.com/Aaxuan/p/8215014.html

时间: 2024-11-05 22:38:54

JS (function (window, document, undefined) {})(window, document)的真正含义的相关文章

js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)

一.浏览器同源策略 首先我们需要了解一下浏览器的同源策略,关于同源策略可以仔细看看知乎上的一个解释.传送门 总之:同协议,domain(或ip),同端口视为同一个域,一个域内的脚本仅仅具有本域内的权限,可以理解为本域脚本只能读写本域内的资源,而无法访问其它域的资源.这种安全限制称为同源策略. ( 现代浏览器在安全性和可用性之间选择了一个平衡点.在遵循同源策略的基础上,选择性地为同源策略"开放了后门". 例如img script style等标签,都允许垮域引用资源.) 下表给出了相对 

jquery插件开发;(function ( $, window, document, undefined ){}(jQuery, window,document)分析

经常看到许多jquery插件是这种形式: ;(function( $, window, document, undefined ){}){ //...code }(jquery,window,document) 一开始自己也是不太清楚,后台查了许多资料博客,基本了解大意,所以总结出来,以供之后查阅更正. 1.自调函数(function(){})() 这是一个自调函数,函数定义后自行调用.将匿名函数放在括号之内,并紧跟一个括号.第二个括号的意思是"立即调用".同时第二个括号也是向匿名函数

JS 关于(function( window, undefined ) {})(window)写法的理解【转】

JS 关于(function( window, undefined ) {})(window)写法的理解 [网络整理] (function( window, undefined ) {})(window); 这个,为什么要将window和undefined作为参数传给它? (function( $, undefined ) {})(jQuery); 同理 因为 ecmascript 执行JS代码是从里到外,因此把全局变量window或jQuery对象传进来,就避免了到外层去寻找,提高效率.und

JS 关于(function( window, undefined ) {})(window)写法的理解

JS 关于(function( window, undefined ) {})(window)写法的理解 [网络整理] (function( window, undefined ) {})(window);这个,为什么要将window和undefined作为参数传给它? (function( $, undefined ) {})(jQuery); 同理 因为 ecmascript 执行JS代码是从里到外,因此把全局变量window或jQuery对象传进来,就避免了到外层去寻找,提高效率.unde

js中的 window.location、document.location、document.URL 对像的区别(转载)

原文:http://www.cr173.com/html/18417_1.html 当我们需要对html网页进行转向的时候或是读取当前网页的时候可以用到下面三个对像: window.location.document.location.document.URL 对当前网页进行跳转 我们先来看看 document 与 window对象: [window 对象]  它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,

window.onload和window.document.readystate的探究

在编写前端页面的时候,我们时常需要对页面加载的状态进行判断,以便进行相应的操作. 比如在移动端,时常需要在页面完全加载完成之前,先显示一个loading的图标,等待页面完成加载完成后,才显示出真正要展现的页面元素.见代码1: <html> <head> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script> function isL

JS function document.onclick(){}报错Syntax error on token &quot;function&quot;, delete this token

JS function document.onclick(){}报错Syntax error on token "function", delete this token function document.onclick() //任意点击时关闭该控件 //ie6的情况可以由下面的切换焦点处理代替 {    with(window.event)   { if (srcElement != outObject && srcElement != outButton)    

$(document).ready vs $(window).load vs window.onload

原文地址: $(document).ready vs $(window).load vs window.onload $(document).ready We execute our code when DOM is ready except images. 1 //call type 1 2 $(document).ready(function() { 3 /** work when all HTML loaded except images and DOM is ready **/ 4 //

javascript jquery document.ready window.onload

网易 博客 下载LOFTER客户端 注册登录 加关注 凡图的编程之路 2012年7月从一个编程新手的点点滴滴 首页 日志 LOFTER 相册 博友 关于我 日志 关于我 Holyson 闻道有先后,术业有专攻 加博友   关注他 文章分类 ·css(2) ·.net控件事件(3) ·帐号密码(0) ·JS与JQ(12) ·sql server指南(5) ·杂谈(2) ·C#基础指南(18) ·.net成长篇(38) ·更多 > LOFTER精选 注册免费冲印20张照片 > 网易新闻 清华毕业学