JS编程建议——61:使用闭包跨域开发

简介: 61:使用闭包跨域开发

建议61:使用闭包跨域开发
闭包是指词法表示包括不必计算的变量的函数,闭包函数能够使用函数外定义的变量。闭包结构有以下两个比较鲜明的特性。
(1)封闭性
外界无法访问闭包内部的数据,如果在闭包内声明变量,外界是无法访问的,除非闭包主动向外界提供访问接口。
(2)持久性
对于一般函数来说,在调用完毕之后,系统会自动注销函数,而对于闭包来说,在外部函数被调用之后,闭包结构依然保存在系统中,闭包中的数据依然存在,从而实现对数据的持久使用。例如:
function f( x ){

var a = x;
var b = function(){
    return x;
}
return b;

}
var c = f( 1 );
alert(c()); //1。调用闭包函数
在上面示例中,首先在函数f结构体内定义两个变量,分别存储参数和闭包结构,而闭包结构中寄存着参数值。当调用函数f之后,函数结构被注销,它的局部变量也随之被注销,因此变量a中存储的参数值也随之丢失。但由于变量b存储着闭包结构,因此闭包结构内部的参数值并没有被释放,在调用函数之后,依然能够从闭包结构中读取到参数值。
从结构上分析,闭包函数与普通函数没有什么不同,主要包含以下类型的标识符:
函数参数(形参变量)。
arguments属性。
局部变量。
内部函数名。
this(指代闭包函数自身)。
其中this和arguments是系统默认的函数标识符,不需要特别声明。这些标识符在闭包体内的优先级是(其中左侧优先级大于右侧):this → 局部变量 → 形参 → arguments → 函数名。
下面以一个经典的闭包示例来演示上述抽象描述:
1 function f(x){ // 外部函数
2 var a = x; // 外部函数的局部变量,并把参数值传递给它
3 var b = function(){ // 内部函数
4 return a; // 访问外部函数中的局部变量
5 };
6 a++; // 访问后,动态更新外部函数的变量
7 return b; // 内部函数
8 }
9 var c = f(5); // 调用外部函数,并赋值
10 alert(c()); // 调用内部函数,返回外部函数更新后的值6
演示步骤说明如下:
第1步,程序预编译之后,从第9行开始解析执行,创建上下文环境,创建调用对象,把参数、局部变量、内部的函数转换为对象属性。
第2步,执行函数体内代码。在第6行执行局部变量a的递加运算,并把这个值传递给对象属性a,内部函数动态保持与局部变量a的联系,同时更新自己内部调用变量的值。
第3步,外部函数把内部函数返回给全局变量c,实现内部函数的定义,此时c完全继承了内部函数的所有结构和数据。
第4步,外部函数返回后(即返回值后调用完毕)会自动销毁,内部的结构、标识符和数据也随之丢失。
第5步,执行第10行代码命令,调用内部函数,此时返回的是外部函数返回时(销毁之前)保存的变量a所存储的最新数据值,即返回6。
如果没有闭包函数的作用,那么这种数据寄存和传递就无法得以实施。例如:
1 function f(x){
2 var a = x;
3 var b = a; // 直接把局部变量的值传递给局部变量b
4 a++
5 return b; //局部变量b
6 }
7 var c = f(5);
8 alert(c); //值为5
通过上面的示例可以很直观地看到,在没有闭包函数的辅助下,第8行代码执行后返回值并没有与外部函数的局部变量a最后更新的值保持一致。
闭包在程序开发中具有重要的价值。例如,使用闭包结构能够跟踪动态环境中数据的实时变化,并即时存储。
function f(){

var a = 1;
var b = function(){
    return a;
}
a++;
return b;

}
var c = f();
alert(c()); //返回2,而不是1
在上面示例中,闭包中的变量a存储的值并不是对上面行变量a的值的简单复制,而是继续引用外部函数定义的局部变量a中的值,直到外部函数f调用返回。闭包不会因为外部函数环境的注销而消失,会始终存在。例如:

var a = 1;
b = function(){
    alert( a );
}
c = function(){
    a ++ ;
}
d = function( x ){
    a = x;
}

}









在上面示例中,在函数f中定义了3个闭包函数,它们分别指向并寄存局部变量a的值,并根据不同的操作动态跟踪变量a的值。当在浏览器中预览时,首先应该单击“按钮1”,调用函数f,生成3个闭包,3个闭包同时指向局部变量a的引用,因此,当函数f返回时,这3个闭包函数都没有被注销,变量a由于被闭包引用而继续存在。这时,如果直接单击“按钮2”和“按钮4”,那么会由于没有在系统中生成闭包结构,而弹出编译错误。单击“按钮3”将动态递增变量a的值,此时如果单击“按钮2”,则会弹出提示值2。如果单击“按钮4”,则向变量a传递值100,将动态改变闭包中寄存的值,此时如果单击“按钮2”,则会弹出提示值100。

相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
48 1
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
30天前
|
Web App开发 JavaScript 前端开发
Node.js开发
Node.js开发
45 13
|
2月前
|
存储 JavaScript 前端开发
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将以Node.js为例,深入探讨其背后的哲学思想、核心特性以及在实际项目中的应用,旨在为读者揭示Node.js如何优雅地处理高并发请求,并通过实践案例加深理解。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
2月前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
本文将带你领略Node.js的魅力,从基础概念到实践应用,一步步深入理解并掌握Node.js在后端开发中的运用。我们将通过实例学习如何搭建一个基本的Web服务,探讨Node.js的事件驱动和非阻塞I/O模型,以及如何利用其强大的生态系统进行高效的后端开发。无论你是前端开发者还是后端新手,这篇文章都会为你打开一扇通往全栈开发的大门。
|
2月前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
在这篇文章中,我们将一起探索Node.js的奇妙世界。无论你是刚接触后端开发的新手,还是希望深化理解的老手,这篇文章都适合你。我们将从基础概念开始,逐步深入到实际应用,最后通过一个代码示例来巩固所学知识。让我们一起开启这段旅程吧!
|
1月前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带领读者从零基础开始,一步步深入到Node.js后端开发的精髓。我们将通过通俗易懂的语言和实际代码示例,探索Node.js的强大功能及其在现代Web开发中的应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的见解和技巧,让你的后端开发技能更上一层楼。
|
2月前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
2月前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带你走进Node.js的世界,从基础到进阶,逐步解析Node.js在后端开发中的应用。我们将通过实例来理解Node.js的异步特性、事件驱动模型以及如何利用它处理高并发请求。此外,文章还会介绍如何搭建一个基本的Node.js服务器,并探讨如何利用现代前端框架与Node.js进行交互,实现全栈式开发。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和深入的理解。
30 4
|
2月前
|
前端开发 JavaScript 关系型数据库
基于 Vue2.0 + Nest.js 全栈开发的后台应用
Vue2 Admin 是一个基于 Vue2 和 Ant Design Pro 开发的前端项目,配合 Nest.js 构建的后端,提供了一个完整的全栈后台应用解决方案。该项目支持动态国际化、用户权限管理、操作日志记录等功能,适合全栈开发者学习参考。线上预览地址:https://vue2.baiwumm.com/,用户名:Admin,密码:abc123456。