使用闭包跨域开发

闭包指词法表示包括不必计算的变量的函数,闭包函数能够使用函数外定义的变量。

闭包特性:

(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.

如果没有闭包函数的作用,那么这种数据寄存和传递就无法得以实施。

例如:

function f(x){

    var a = x;

    var b = a;   //把局部变量的值传递给局部变量b

    a++

    return b;   //局部变量b

}

var c = f(5);

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的值的简单复制,直到外部函数f调用返回。闭包不会因为外部函数环境的注销而消失,会始终存在。

<script language = ‘javascript‘ typt=‘text/javascript‘>

function f(){

  var a = 1;

  b = function(){

  alert(a);

}

  c = function(){

  a++;

}

  d = function(x){

  a = x;

}

}

</script>

<button onclick = "f()">按钮1:(f())()</button><br/>

<button onclick = "b()">按钮2:(b = function(){alert(a);})()</button><br/>

<button onclick = "b()">按钮3:(c = function(a++;){alert(a);})()</button><br/>

<button onclick = "b()">按钮4:(d = function(x){a = x;})(100)</button><br/>

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

时间: 2024-11-06 22:41:25

使用闭包跨域开发的相关文章

建议17:使用闭包跨域开发

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

angularjs跨域post解决方案

转自:http://www.thinksaas.cn/topics/0/34/34536.html 前端同学李雷和后台同学韩梅梅分别在自己电脑上进行开发,后台接口写好的时候,李雷改动完就把前端代码上传到gitlab,然后在测试机上从gitlab上拉下来,然后在测试机上移动最新代码,最后回到本机刷新页面.有时候碰到网速不好的情况传个git传了半天,或者李雷刚上传完发现少写了一个单词,加上再传上一看尼玛单词又写错了.对于实时需要改动代码的李雷同学而言 另外一种方案是李雷和韩梅梅分别在自己电脑上进行开

js 跨域问题常见的五种解决方式

一.什么是跨域? 要理解跨域问题,就先理解好概念.跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名.协议和端口号的组合. URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件

Chrome 跨域 disable-web-security 关闭安全策略

谷歌浏览器暂时关闭跨域. 当遇到以下情况,则可以简单的使用 关闭Chrome 安全策略跨域 开发时跨域,上线后,部署在一个域名下没有跨域问题 开发时,临时解决跨域问题 只有开发时用这个,其他时候,就不要使用这种方式了 https://github.com/zhongxia245/blog/issues/28 原文地址:https://www.cnblogs.com/wzq201607/p/10177484.html

Vue---vue-cli 中的proxyTable解决开发环境中的跨域问题

使用vue+vue-cli+axios+element-ui开发后台管理系统时,遇到一个问题,后台给了一个接口,我这边用axios请求数据,控制台总是报405错误和跨域错误 错误 405? 没见过!! 查了一下资料, 错误405表示--用来访问本页面的HTTP谓词不被允许,谓词指的就是GET.POST 和 HEAD等.说白了就是请求的方法不被允许!可是,我是完全按照后台给的接口文档写的啊 this.$http({ method: 'POST', url: 'auth/login', data:

Vue-cli proxyTable 解决开发环境的跨域问题(转)

Vue-cli proxyTable 解决开发环境的跨域问题 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名.今天翻看代码时,突然发现vue-cli的config文件里有一个参数叫proxyTable,看这个名字就感觉能解决问题,于是我就去搜了一下,果然.在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy

前端开发如何独立解决跨域问题

背景 跨域是由浏览器同源策略引起的,是指页面请求的接口地址,必须与页面url地址处于同域上(即域名,端口,协议相同).这是为了防止某域名下的接口被其他域名下的网页非法调用,是浏览器对JavaScript施加的安全限制. 这个措施出发点是好的,但在项目开发的过程中,常常给前端开发者带来麻烦. 由于页面开发中,静态资源是放在本地电脑上的,访问这些资源通常通过IP方式(127.0.0.1)或者localhosts来访问,与线上服务器所在域名不符,不能顺利进行接口调用. 解决跨域问题常用的解决方案有两个

前端开发用nginx代理服务器解决服务器跨域问题及跨域访问https访问(mac系统下)

前端开发经常遇到一些服务器由于跨域造成访问不了的情况.以前BS模式,前后端都是一个人开发,跨域问题造成的开发阻碍不是很明显,但是现在前端框架欣欣向荣,很多时候变成了CS模式的开发,但浏览器天生的跨域限制,造成了开发,特别是对单独的前端开发人员(不太懂后台开发的人)造成一定开发障碍.还好有nodejs及其一系列前端自动化工具很好的解决了开发时的问题.但今天我要说的用nginx代理来解决这个问题.我觉得很简单!以下都是基于mac系统的操作!先看没有代理时,随便访问网上一个接口, http://web

Vue-cli proxyTable 解决开发环境的跨域问题(重写路径,删除基本路径)

和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名.今天翻看代码时,突然发现vue-cli的config文件里有一个参数叫proxyTable,看这个名字就感觉能解决问题,于是我就去搜了一下,果然.在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,使用的就是这个参数.https://vuejs-tem