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

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

    本文主要介绍了javascript立即执行函数表达式IIFE的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧

    JavaScript函数IIFE使用详解

    主要介绍了JavaScript函数IIFE使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    gulp-iife:一个Gulp插件,用于在IIFE中包装JavaScript代码

    口香糖一个Gulp插件,用于将JavaScript代码包装在立即调用的函数表达式(IIFE)中。安装$ npm install --save-dev gulp-iife用法var gulp = require ( "gulp" ) ;var iife = require ( "gulp-iife" ) ;gulp . task ...

    Logit:再次尝试 javascript,试图让 IIFE 工作

    登录 再次尝试 javascript,试图让 IIFE 工作。 它仍然让我感到困惑。

    davidBowie-IIFE:封装囊封IIFE

    davidBowie-IIFE:封装囊封IIFE

    rollup-plugin-iife:将ES模块转换为IIFE

    该插件可以将ES模块的输出转换为IIFE。 安装 npm install -D rollup-plugin-iife 用法 import iife from "rollup-plugin-iife" ; export default { input : [ "entry.js" , "entry2.js" ] , output : { dir : ...

    前端开源库-cjs2iife

    前端开源库-cjs2iifecjs2ife,commonjs模块到iffe代码

    kaindy7633#blog#JavaScript装x指南1

    Table of Contents generated with DocTocJavaScript装逼指南IIFE(自动执行函数)JavaScript装逼指南通

    详解JavaScript的闭包、IIFE、apply、函数与对象

    目录 一、闭包(Closure) 1.1、闭包相关的问题 ...3.5、立即执行函数表达式 (IIFE) 3.5.1、匿名函数与匿名对象 3.5.2、函数与函数表达式 3.5.3、立即执行函数表达式与匿名对象 3.5.4、各种IIFE的写法 3.5.5、参数

    js中let能否完全替代IIFE

    最近,我写了一篇关于syntax of Java’s IIFE pattern的文章,来解释为什么我们用现在的方式来写立即执行函数表达式。少数的读者批评文章过时了,都在争论在ECMA 2015中介绍的块级作用域变量使IIFE变得过时了。 恰恰...

    es-iife:将ES模块转换为简单的IIFE

    将ES模块转换为简单的IIFE。 特征 import语句解析为全局变量。 export语句作为全局变量导出。 在test/cases文件夹下还有更多示例。 用法 const { parse } = require ( "acorn" ) ; const { transform } = require...

    js 逆向实战之分离式 webpack 非 IIFE 改写

    js 逆向实战之分离式 webpack 非 IIFE 改写

    js中的立即执行函数1

    IIFE(立即调用函数表达式)IIFE( 立即调用函数表达式)是一个在定义时就会立即执行的 JavaScript 函数。示例当函数变成立即执行的函数表达式时,

    babel-plugin-typescript-iife-enum

    babel-plugin-typescript-iife-enum目的TypeScript转换为IIFE中的包装器枚举。目的目前,TypeScript将从enum Test { Key = 1} 到var Test ;( function ( Test ) { Test [ Test [ "Key" ] = 1 ] = "Key" ;} ) ( Test ...

    JavaScript中的立即执行函数表达式介绍

    发现原来还有一种叫法是: 立即调用函数表达式 (IIFE,Immediately-Invoked Function Expression) 立即调用函数表达式 相比于自执行匿名函数,立即调用函数表达式的意思来得更明确一些。 自执行函数有下面的这一些...

    前端开源库-gulp-iife

    前端开源库-gulp-iifeGulpIIfe,将JavaScript代码包装在立即调用的函数表达式中。

    你有必要知道的10个JavaScript难点

    立即执行函数,即Immediately Invoked Function [removed]IIFE),正如它的名字,就是创建函数的同时立即执行。它没有绑定任何事件,也无需等待任何异步操作: (function() { // 代码 // ... })(); function(){…}...

Global site tag (gtag.js) - Google Analytics