JavaScript: 零基础轻松学闭包,实战

2022-12-22 0 199

责任编辑面向全国新手,天神轻喷。

好了,开始吧。

上四节 JavaScript: 零此基础随心所欲学旋量群(1)中,我们对旋量群的基本原理进行了传授,这四节会说许多两栖作战性的东西了,可能会有点儿技术难度,你准备好了吗?

1. 如何将私有统计数据曝露进来

还提过在上四节中,有这种三个范例么?

var test = function(){ var i = 10; } function test2(){ alert(i); } test2();

表达式 test 和 test2 各别形成三个旋量群,三个旋量群之间难以出访旁人的专有统计数据。比如说,在 test 中表述的表达式,在 test2 里头是难以间接出访到的。

所以难题来了, 总之,那边和推土机说实话。这里的难题是,是不是什么配套措施让 test2 可以出访到其他旋量群中的专有表达式呢?

配套措施总之是有的是,最间接的设想是,反正我表述三个自上而下表达式,在 test 上将专有统计数据Kozhikode自上而下表达式,然后在 test2 里头就能出访到了。

是的,因为三个表达式协力独享三个自上而下codice,所以这个配套措施确实可取。我在许多项目里也确实看到许多人是这么做的。

所以,是不是一种更快的方式呢?要知道,自上而下codice是三个比较脆弱的地方,白白就会出现表达式名多次重复的难题。别忘了说一句,在自上而下codice中,尽可能千万别使用譬如 temp , a , b , c 这两类的平民化表达式。

只好,这就牵涉到codice的相关科学知识了,你在C词汇的教科书中的确习以为常了近似于这种的标识符

int sum(int a,int b) { return a + b; } int all = sum(3,5);

这是三个单纯的请降表达式,许多人慢慢地教养了这种三个道德观,是表达式的codice是三个字面额,或是是位数类别,或是是穆尔类别,或是是数组。

在许多强类别的词汇,譬如 Java,C,C++, 确实这般。但是 return 在 JavaScript 中却裂稃濶濑。

在上四节已经说明了,js 的表达式也是一种统计数据类别,你可以把函数看成是和int , float , double 一样的东西。

所以,既然int可以当做表达式的参数或是codice,表达式总之也可以!

请看下面两句话:

在js中

如果表达式被当做参数传进去了,它是所谓的回调表达式。如果表达式被当做codicereturn进来了,它是把三个旋量群return进来了。

这一章不讲回调表达式,如果你不清楚啥叫回调表达式,可以去看看这个小范例:

(浅谈js回调表达式)

还是上面的那个范例,我们希望在 test2 中可以出访到 test 里头的表达式,可以这种做:

var test = function(){ var i = 10; /* 表述三个表达式将表达式i曝露进来 */ var get = function(){ return i ; } return get; //将获得i的表达式曝露进来 } function test2(){ var fn= test();//接收test曝露出来的表达式 alert(fn()); //获得test中的专有统计数据 } test2();
JavaScript: 零基础轻松学闭包,实战

i 进入 get 方式的旋量群,被包了起来,然后最终被返回了进来。

你可能会说,我间接在test中把i给return进来就好了嘛,干嘛这么麻烦。

是的,言之有道理。

可是,如果我要出访 test 中多个专有统计数据咋办捏?

这下你可明白了吧!

现在,我们给出关于旋量群的第二个注解:

(第三个注解在上四节)

从应用的角度来看,旋量群可以将表达式或是对象的专有统计数据曝露进来,而不影响自上而下codice。

JavaScript: 零基础轻松学闭包,实战

通过这张图,是不是好理解一些了呢?我们这四节单说表达式里的专有统计数据。

2. 将专有统计数据包装成json对象

刚才的范例说明,在js中,return进来的可以是基本统计数据类别,也可以是表达式类别。

其实,JavaScript是一种基于对象的词汇,也有对象的概念,所以,我们可以把你需要的东西包裹成三个对象返回进来!

上标识符:

var test = function(){ var apple = 苹果; var pear = 梨子; /* 表述三个表达式将水果曝露进来 */ var getFruit = { apple : apple , pear : pear } return getFruit; //将获得i的表达式曝露进来 } function test2(){ var getFruit = test();//接收test曝露出来的表达式 console.log(getFruit); } test2();

像这种用 { } 括起来的东西是三个js对象,也是所谓json。你可能经常会听到json这个词,觉得还挺高大上的。其实它是三个用 { } 包起来的统计数据而已。

里头是键值对的形式,非常近似于Java里头的HashMap。

在这个范例中,我们可以间接把需要曝露的专有统计数据用三个 { } 包起来,构成三个json对象return进来就可以啦。

因为是 js 对象,alert 不能看到里头的具体内容,所以我们使用 console.log() ,结果如下:

JavaScript: 零基础轻松学闭包,实战

展开后:

JavaScript: 零基础轻松学闭包,实战

Paste_Image.png

这种是不是也可以了?多出来的 proto 是原型链,以后会讲到。

3. 我们来做三个紫金葫芦

大家都还提过西游记里孙悟空用遮天的把戏骗来的紫金葫芦吗,只要你拿着这个葫芦,叫一声别人的名字,如果答应了,别人就会被吸进去。

OK,这个紫金葫芦里头不正如三个旋量群吗?

对不对嘛,所以,我们用旋量群的科学知识来做三个好玩的东西吧。

<body> <div id=box style=width:50px;height:50px;background:#333;color:#fff;text-align:center;line-height:50px>小妖</div> </body>
JavaScript: 零基础轻松学闭包,实战

紫金葫芦里头的源码大概是这种的:

var 紫金葫芦 = function(id){ var domElement = document.getElementById(id); var returnObject = { domElement : domElement , backgroundColor : function(color){ domElement.style.backgroundColor = color; }, click : function(fn){ domElement.onclick = fn; } }; return returnObject; }

注:我纯粹是为了看起来方便而采用中文表述表达式,在实际开发中,千万不要使用中文表达式。

我们在返回进来的对象上加了三个东西:

1.domElement

你传进来三个id,我就用 document.getElementById 来包一下,得到三个dom元素,最终要操作的也是这个dom元素。也是说:

var box1 = 紫金葫芦(box).domElement; var box2 = document.getElementById(box); alert(box1 === box2);
JavaScript: 零基础轻松学闭包,实战

他们是三个东西,一样的。

紫金葫芦(box);

这行标识符一旦执行,紫金葫芦就会返回 returnObject 对象,也是说。我们喊一声 “box”,那个id为box的小妖一答应,就被装进来了,然后我们可以对它为所欲为!

比如说,给它换三个背景色:

2.backgroundColor 给元素添加背景色的方式

var box = 紫金葫芦(box); box.backgroundColor(red);
JavaScript: 零基础轻松学闭包,实战

3.click 给元素添加点击事件,需要传入三个回调表达式

var box = 紫金葫芦(box); box.click(function(){ alert(就没人吐槽这个无聊的作者么,小妖也有尊严的好么,啊喂!!); });

结果:

JavaScript: 零基础轻松学闭包,实战

也许你已经发现了,这些方式是不是和jQuery有点儿类似呢?

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务