《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.');
  });
}());
相关文章
|
4月前
|
JavaScript 前端开发 开发者
从0开始学习JavaScript--JavaScript 表达式与运算符
JavaScript中的表达式和运算符是构建逻辑、进行计算的基础。本文将深入研究JavaScript中各类表达式,包括算术表达式、关系表达式、逻辑表达式,以及运算符的使用方法,并通过丰富的示例代码来帮助读者更全面地了解和运用这些概念。
|
4月前
|
JavaScript 前端开发
JavaScript 什么是三元表达式?
JavaScript 什么是三元表达式?
|
1月前
|
自然语言处理 JavaScript 前端开发
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
|
1月前
|
JavaScript 前端开发
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(上)
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(上)
|
1月前
|
JavaScript 前端开发
javascript函数表达式
javascript函数表达式
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式
|
3月前
|
JavaScript 前端开发
第5节:Vue3 JavaScript 表达式
第5节:Vue3 JavaScript 表达式
34 0
|
3月前
|
前端开发 JavaScript
【面试题】 JavaScript中高级语法--?? 表达式 的作用
【面试题】 JavaScript中高级语法--?? 表达式 的作用
|
4月前
|
JavaScript 前端开发
JavaScript中的短路表达式
JavaScript中的短路表达式
|
4月前
|
人工智能 JavaScript
js正则表达式new RegExp(表达式, “gi“)不区分大小写、忽略大小写匹配替换字符
js正则表达式new RegExp(表达式, “gi“)不区分大小写、忽略大小写匹配替换字符