《JavaScript应用程序设计》一一2.4 立即执行函数表达式

简介:

本节书摘来华章计算机出版社《JavaScript应用程序设计》一书中的第2章,第2.4节,作者:Eric Elliott 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.4 立即执行函数表达式

在JavaScript中,我们可以在函数声明后立即将其执行,这个技术曾在社区中被称为“自执行匿名函数”,不过冠以这个名称让人们觉得函数能够被递归调用,显然有点不太妥。Ben Alman曾发表了一篇名为“自执行函数表达式”(IIFE)的博文(http://bit.ly/i-ife/),相比之下,人们觉得缩写IIFE显得更为有趣且清晰易懂,现在IEIF一词已经在JavaScript社区中广为使用。
IIFE所创建出的临时作用域常常用来作模块封装,jQuery正式使用了IIFE将内部变量与全局作用域隔离开。在IIFE这项技术出现之前,以往的模块封装做法是将方法直接赋值在原型之上。

var Lightbulb = function () {
    this.isOn = false;
  },
  lightbulb = new Lightbulb();

Lightbulb.prototype.toggle = function () {
  this.isOn = !this.isOn;
  return this.isOn;
};

Lightbulb.prototype.getState = function getState() {
  // Implementation...
};

Lightbulb.prototype.off = function off() {
  // Implementation...
};

Lightbulb.prototype.on = function on() {
  // Implementation...
};

Lightbulb.prototype.blink = function blink() {
  // Implementation...
};

test('Prototypes without IIFE.', function () {
  equal(lightbulb.toggle(), true, 'Lightbulb turns on.');
  equal(lightbulb.toggle(), false, 'Lightbulb turns off.');
});

如你所见,这种模块封装的方式极易导致重复的方法声明,上述示例中Lightbulb.prototype在每一条方法声明中都有出现。IIFE可以将整个作用域封装起来,此时方法可以赋值给普通变量,所有数据被封装在闭包中,代码组织随之也变得更为灵活。

(function () {
  var isOn = false,
    toggle = function toggle() {
      isOn = !isOn;
      return isOn;
    },
    getState = function getState() {
      // Implementation...
    },
    off = function off() {
      // Implementation...
    },
    on = function on() {
      // Implementation...
    },
    blink = function blink() {
      // Implementation...
    },

    lightbulb = {
      toggle: toggle,
      getState: getState,
      off: off,
      on: on,
      blink: blink
    };

  test('Prototypes with IIFE.', function () {
    equal(lightbulb.toggle(), true,
      'Lightbulb turns on.');
    equal(lightbulb.toggle(), false,
      'Lightbulb turns off.');
  });
}());
相关文章
|
11月前
|
JavaScript 前端开发
JavaScript中的短路表达式
JavaScript中的短路表达式
75 0
|
6月前
|
JavaScript
js---三元表达式详解
js---三元表达式详解
244 0
|
8月前
|
JavaScript 前端开发
JavaScript基础&实战 JS中正则表达式的使用
这篇文章介绍了JavaScript中正则表达式的使用,包括正则表达式的创建、匹配模式、字符串匹配、拆分、搜索、匹配和替换等方法,并通过示例代码展示了如何应用这些技术。
JavaScript基础&实战 JS中正则表达式的使用
|
8月前
|
JavaScript 前端开发
在js中正则表达式验证小时分钟,将输入的字符串转换为对应的小时和分钟
这篇文章介绍了如何在JavaScript中使用正则表达式来验证时间字符串的格式(小时和分钟),并提供了将时间字符串转换为JavaScript Date对象的示例代码及其测试结果。
|
8月前
|
JavaScript 前端开发 API
vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
这篇文章介绍了如何在Vue框架中将表单输入验证逻辑封装到一个JavaScript文件中,并通过正则表达式验证邮箱、身份证、手机号等信息,同时确保两次密码输入的一致性。
|
10月前
|
设计模式 自然语言处理 JavaScript
JavaScript进阶-函数表达式与闭包
【6月更文挑战第18天】JavaScript函数不仅是代码块,还是值,具备函数表达式和闭包等特性。函数表达式如匿名函数,可赋值、传参,但不提升,过度使用影响可读性。闭包允许访问外部作用域,即使父函数已结束,但不当使用可能导致内存泄漏。理解并妥善处理这些问题,如命名函数表达式、及时释放引用,能提升代码质量。通过实践深化对这些关键概念的理解至关重要。
60 2
|
10月前
|
存储 JavaScript 前端开发
JavaScript——JavaScript基础:数组 | JavaScript函数:使用、作用域、函数表达式、预解析
在JavaScript中,内嵌函数可以访问定义在外层函数中的所有变量和函数,并包括其外层函数能访问的所有变量和函数。①全局变量:不在任何函数内声明的变量(显式定义)或在函数内省略var声明的变量(隐式定义)都称为全局变量,它在同一个页面文件中的所有脚本内都可以使用。函数表达式与函数声明的定义方式几乎相同,不同的是函数表达式的定义必须在调用前,而函数声明的方式则不限制声明与调用的顺序。③块级变量:ES 6提供的let关键字声明的变量称为块级变量,仅在“{}”中间有效,如if、for或while语句等。
90 0
|
11月前
|
JavaScript 前端开发
JavaScript中的短路表达式
JavaScript中的短路表达式
41 1
|
11月前
|
JavaScript 前端开发 数据可视化
JavaScript 什么是三元表达式?
JavaScript 什么是三元表达式?
120 1
|
11月前
|
JavaScript 前端开发 开发者
解密 JavaScript 中的三元运算符:简洁而强大的条件表达式
解密 JavaScript 中的三元运算符:简洁而强大的条件表达式
283 0
下一篇
oss创建bucket