JavaScript实战之闭包与函数调用的相互应用详解

简介: JavaScript实战之闭包与函数调用的相互应用详解

JavaScript闭包

在这里插入图片描述

JavaScript变量可以是局部变量或全局变量。
私有变量可以使用闭包。

全局变量

函数可以访问函数内部定义的变量,例如:

function myFunction() {
    var a = 4;
    return a * a;
}

在这里插入图片描述
在后一个示例中,a是全局变量。
在网页中,全局变量属于窗口对象。
全局变量可以应用于页面上的所有脚本。
在第一个示例中,a是局部变量。
局部变量只能在定义它的函数内使用。不适用于其他函数或脚本代码。
全局变量和局部变量是两个不同的变量,即使它们具有相同的名称。修改其中一个不会影响另一个的值。

如果在声明变量时不使用VaR关键字,则它是全局变量,即使它是在函数中定义的。

变量生命周期

全局变量的范围是全局的,也就是说,在整个JavaScript程序中,全局变量无处不在。
函数内声明的变量仅在函数内工作。这些变量是局部变量,范围是局部的;函数的参数也是局部的,仅在函数内工作。

计数器困境

想象一下,如果您想对一些值进行计数,并且计数器在所有函数中都可用。
您可以使用全局变量设置计数器:

var counter = 0;
 
function add() {
   return counter += 1;
}
 
add();
add();
add();

运行结果如下:
在这里插入图片描述
执行add()函数时,计数器值会更改。
但问题是,即使没有调用add()函数,页面上的任何脚本都可以更改计数器。
如果在函数中声明计数器,则在不调用函数的情况下无法修改计数器的值:
在这里插入图片描述
本意是想输出 3, 但事与愿违,输出的都是 1

function add() {
    var counter = 0;
    return counter += 1;
}
 
add();
add();
add();

在这里插入图片描述
上述代码将无法正确输出。每次调用add()函数时,计数器将设置为1。
JavaScript嵌入函数可以解决这个问题。

JavaScript 内嵌函数

所有函数都可以访问全局变量。
事实上,在JavaScript中,所有函数都可以访问上一层的范围。
JavaScript支持嵌套函数。嵌套函数可以访问上一级的函数变量。
在本例中,嵌入式函数plus()可以访问父函数的计数器变量:

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}

如果我们可以从外部访问plus()函数,我们就可以解决计数器的困境。
我们还需要确保counter=0只执行一次。
我们需要关闭。

JavaScript 闭包

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();

变量add指定函数自调用的返回字值。
自调用函数只执行一次。将计数器设置为0。并返回函数表达式。
add变量可用作函数。最重要的是,它可以访问函数上方一级作用域中的计数器。
这称为JavaScript闭包。它使得函数可以具有私有变量。
计数器受匿名函数的作用域保护,只能通过add方法修改。

作为一个函数调用

myFunction(10, 2) 返回 20

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2); 

上述函数不属于任何对象。但它始终是JavaScript中的默认全局对象。
html中的默认全局对象是html页面本身,因此函数属于html页面。
浏览器中的页面对象是浏览器窗口(窗口对象)。上述函数将自动成为窗口对象的函数。
Myfunction()和window Myfunction()

function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);

当函数没有被它自己的对象调用时,该函数的值将成为全局对象。
在web浏览器中,全局对象是浏览器窗口(窗口对象)。
此实例返回的值为窗口对象:

function myFunction() {
    return this;
}
myFunction(); 
当函数作为全局对象调用时,其值将成为全局对象。
使用窗口对象作为变量很容易导致程序崩溃。

作为函数方法调用函数

在JavaScript中,函数是对象。JavaScript函数有其属性和方法。
Call()和apply()是预定义的函数方法。可以使用两种方法调用函数。两个方法的第一个参数必须是对象本身。

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);  

两种方法都使用对象本身作为第一个参数。两者之间的区别是第二个参数:apply在参数数组中传递,也就是说,多个参数组合成一个数组,call作为call的参数传入(从第二个开始)。

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);

在JavaScript严格模式下,调用函数时,第一个参数将成为this的值,即使该参数不是对象。
在JavaScript非严格模式下,如果第一个参数的值为null或未定义,它将使用全局对象。

相关文章
|
24天前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
174 77
|
15天前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
22天前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
65 31
|
10天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
10天前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
23天前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
22天前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
39 3
|
24天前
|
前端开发 JavaScript 关系型数据库
基于 Vue2.0 + Nest.js 全栈开发的后台应用
Vue2 Admin 是一个基于 Vue2 和 Ant Design Pro 开发的前端项目,配合 Nest.js 构建的后端,提供了一个完整的全栈后台应用解决方案。该项目支持动态国际化、用户权限管理、操作日志记录等功能,适合全栈开发者学习参考。线上预览地址:https://vue2.baiwumm.com/,用户名:Admin,密码:abc123456。
|
25天前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
JavaScript 前端开发 Windows
运用JavaScript构建你的第一个Metro式应用程序(onWindows 8)(三)
原文 http://blog.csdn.net/zhangxin09/article/details/6793593 这是《运用 JavaScript构建你的第一个Metro式应用程序》系列教程的最后一篇,将会告诉你在的 Microsoft Visual Studio 11 Express for Windows Developer Preview 提供的Metro 样式和 Split 模板的帮助下,如何透过 CSS样式 使得你的程序更符合 Windows 的 Look & feel。
1164 0
下一篇
DataWorks