`
rensanning
  • 浏览: 3545971 次
  • 性别: Icon_minigender_1
  • 来自: 大连
博客专栏
Efef1dba-f7dd-3931-8a61-8e1c76c3e39f
使用Titanium Mo...
浏览量:38095
Bbab2146-6e1d-3c50-acd6-c8bae29e307d
Cordova 3.x入门...
浏览量:607092
C08766e7-8a33-3f9b-9155-654af05c3484
常用Java开源Libra...
浏览量:682036
77063fb3-0ee7-3bfa-9c72-2a0234ebf83e
搭建 CentOS 6 服...
浏览量:89202
E40e5e76-1f3b-398e-b6a6-dc9cfbb38156
Spring Boot 入...
浏览量:401675
Abe39461-b089-344f-99fa-cdfbddea0e18
基于Spring Secu...
浏览量:69652
66a41a70-fdf0-3dc9-aa31-19b7e8b24672
MQTT入门
浏览量:91647
社区版块
存档分类
最新评论

JavaScript的IIFE(即时执行方法)

 
阅读更多
IIFE :immediately-invoked function expression

(1)标准写法
(function (window, document, undefined) {
  // 
})(window, document);


(2)作用域Scope
JavaScript有function作用域,所以function首先创建一个私有的作用域,在执行的时候都会创建一个执行上下文。
(function (window, document, undefined) {
  var name = '张三';
})(window, document);
console.log(name); // 因为作用域不同,这里的name未定义。


调用方法一:
var logMyName = function (name) {
  console.log(name);
};
logMyName('李四');


调用方法二:
var logMyName = (function (name) {
  console.log(name);
})('王五');


需要注意的是需要用括号把函数内容括起来:
function () {
  // ...
})();


没有括号的话会报语法错:
function () {
  // ...
}();


也可以强制JavaScript识别代码(一般很少这么用):
!function () {
  // ...
}();

+function () {
  // ...
}();

-function () {
  // ...
}();

~function () {
  // ...
}();


比如:
var a = !function () {
    return true;
}();
console.log(a); // 打印输出 false

var b = (function () {
    return true;
})();
console.log(b); // 打印输出 true


(3)参数Arguments

传递参数给IIFE
(function (window) {
  // 这里可以调用到window
})(window);

(function (window, document) {
  // 这里可以调用到window和document
})(window, document);


undefined参数
在ECMAScript 3中undefined是mutable的,这意味着可以给undefined赋值,而在ECMASCript 5的strict模式('use strict';)下是不可以的,解析式时会报语法错。

所以为了保护IIFE的变量需要undefined参数:
(function (window, document, undefined) {
  // ...
})(window, document);


即使有人给undefined赋值也没有关系:
undefined = true;
(function (window, document, undefined) {
  // undefined指向的还是一个本地的undefined变量
})(window, document);


(4)代码压缩Minifying
(function (window, document, undefined) {
  console.log(window); // window对象
})(window, document);

代码压缩后,undefined的参数不再存在,但是由于 (window, document); 的调用没有传递第三个参数,所有c依然是一个本地undefined变量,所有参数中undefined的名字是无所谓什么的,只需要知道他指向的是一个undefined变量。
(function (a, b, c) {
  console.log(a); // window对象
})(window, document);


除undefined变量外,其他的所有希望只在函数内部有效的变量都可以通过参数传递进去,比如以下的jQuery对象。
(function ($, window, document, undefined) {
  // 使用 $ 指向 jQuery,比如:
  // $(document).addClass('test');
})(jQuery, window, document);

(function (a, b, c, d) {
  // 代码会被压缩为:
  // a(c).addClass('test');
})(jQuery, window, document);


What (function (window, document, undefined) {})(window, document); really means
分享到:
评论

相关推荐

    Javascript 中的即时函数和初始化分支

    即时函数,也称为立即执行函数表达式(IIFE,Immediately Invoked Function Expression),是JavaScript中一种特殊的函数调用方式。它在声明的同时即被调用,避免了变量污染全局作用域,常用于模块化开发和闭包的...

    Javascript自执行匿名函数(function() { })()的原理浅析_.docx

    3. **即时执行的功能**:例如在某些场景下需要立即执行一段代码进行初始化设置等操作时,自执行匿名函数提供了一种简洁高效的方式。 #### 总结 自执行匿名函数是JavaScript中一项非常有用且强大的特性,它不仅可以...

    javascript 中(function{})这种写法什么意思?.docx

    3. **即时执行**:某些情况下需要立即执行一段代码逻辑,并不需要后续再次调用,这时就可以使用IIFE。 4. **避免命名冲突**:IIFE可以确保其内部定义的函数或变量不会与其他地方同名的变量发生冲突。 #### 示例分析...

    JavaScript基础练习_day10

    - 即时执行:函数一旦定义就会被立即执行。 - 节省内存:对于只需要执行一次的函数,可以通过IIFE的形式立即执行并释放内存。 **IIFE的声明方法**: ```javascript (function functionName(形参) { // your code })...

    JavaScript - Complete JavaScript professional tips secrets

    立即执行函数表达式(Immediately Invoked Function Expression,IIFE)是一种用于创建即时运行的匿名函数的方法。这种方法通常用于创建局部作用域,以避免污染全局命名空间。例如: ```javascript (function() { ...

    JavaScript 权威指南(第6版)

    3. **函数式编程**:JavaScript支持函数式编程风格,包括高阶函数、闭包、函数表达式和立即执行函数表达式(IIFE)。这些特性使得JavaScript在处理复杂逻辑时更加灵活。 4. **数组和集合**:JavaScript中的数组是...

    JavaScript 网页开发实例教程(PDG).rar

    你将学习到如何使用立即执行函数表达式(IIFE)来封装代码,避免全局变量污染,以及如何利用开发者工具进行有效的错误检测和性能优化。 最后,跨平台开发已经成为现代Web开发的一大趋势。通过使用如Node.js这样的...

    Javascript45个经典例子

    39. **代码优化**:利用`const`和`let`代替`var`,避免全局变量污染,使用立即执行函数(IIFE)等。 40. **模块打包工具**:如Webpack、Rollup,将多个模块打包成单个文件,方便部署和加载。 41. **代码复用**:...

    JavaScript学习方案

    - JavaScript是一种解释型或即时编译型的编程语言。 - 它是一种轻量级的语言,常用于Web应用程序开发。 - JavaScript主要在客户端执行,但也可以在服务器端运行(如Node.js)。 2. **发展历程**: - 1995年由...

    JavaScriptCart:基本的 JavaScript 购物车

    JavaScript 是一种广泛用于网页和网络应用的脚本语言,它运行在客户端浏览器上,为用户提供即时反馈和交互体验。在 JavaScriptCart 中,我们主要利用 JavaScript 的事件监听、对象和数组等基础知识来构建购物车。 ...

    JavaScript中的函数模式详解

    6. 即时函数模式(IIFE,Immediately Invoked Function Expression):即时函数模式是一种特殊的函数表达式,它会在定义后立即执行。IIFE可以用来创建一个独立的作用域,这样可以避免全局变量的污染,并且可以模拟...

    javascript中的有名函数和无名函数

    这种类型的函数通常作为参数传递给其他函数,或者用于即时执行(IIFE,Immediately Invoked Function Expression)。 ##### 3.1 无名函数定义 无名函数的定义不包含函数名,通常以赋值的方式定义,如下所示: ```...

    jsp日历插件 js

    为了实现日历的动态渲染,JavaScript可能会使用一些常见的设计模式,如模块化(通过立即执行函数表达式IIFE或ES6的模块系统)、工厂函数或者类来组织代码。此外,CSS则负责样式设计,使日历看起来美观且易于阅读。 ...

    学习并汇集javascript匿名函数

    这在某些情况下非常有用,例如在即时调用函数表达式(IIFE)或者在事件处理程序中。我们来逐步学习并汇总JavaScript匿名函数的相关知识点。 首先,定义一个函数在JavaScript中主要有三种方式。第一种是使用函数声明...

    简短几句 通俗解释javascript的闭包

    1. 在循环体内,创建一个即时执行的函数(IIFE),该函数接受一个参数(即当前循环的i值),并返回一个函数(我们称之为内部函数)。这个内部函数会在事件触发时被调用。 2. 这个内部函数被保存为对应的li元素的事件...

    原生JS实现关键词搜索选择筛选特效源码.zip

    可以使用立即执行函数(IIFE)、类(class)或原型(prototype)等方法来组织代码。 10. **文件"使用须知.txt"**:这个文件可能包含了关于如何运行和使用这个源码的指导,包括可能需要的环境设置、依赖库的引入以及具体的...

    javascript设计模式 – 单例模式原理与应用实例分析

    在JavaScript中,这通常通过即时执行函数(IIFE)来实现,以保证私有变量和全局访问点。当单例模式被实现后,整个系统在任何时候都应该能通过全局访问点获得相同的实例。 在JavaScript中实现单例模式有两大分支:...

    JavaScript匿名函数与委托使用示例

    - **即时定义函数**:如立即执行函数表达式(IIFE),用于代码块的隔离和立即执行。 - **定时器与延时函数**:在`setTimeout`或`setInterval`中使用匿名函数作为回调。 #### 委托的优势 - **简化事件绑定**:不必为...

    (function(){})()的用法与优点

    总结来说,`(function(){})()` 的优点主要包括保护全局作用域、提供模块化、支持参数传递、利用闭包特性以及实现代码的即时执行。在实际开发中,理解并掌握这一技术对于编写高效、可维护的 JavaScript 代码至关重要...

Global site tag (gtag.js) - Google Analytics