零基础轻松学JavaScript闭包(3)

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闭包

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

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

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

OK,这个紫金葫芦里面不正如一个闭包吗?

对不对嘛,所以,我们用闭包的知识来做一个好玩的东西吧。

<body> <div>小妖</div> </body>

紫金葫芦里面的源码大概是这样的:

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); Paste_Image.png

零基础轻松学JavaScript闭包

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

紫金葫芦('box');

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

比如,给它换一个背景色:

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

var box = 紫金葫芦('box'); box.backgroundColor('red');

3.click 给元素添加点击事件,需要传入一个回调函数

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

结果:

零基础轻松学JavaScript闭包

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwjdgg.html