班门弄斧02：Javascript闭包，实践篇

闭包是 函数的局部变量集合，并且集合中的元素滞留在堆栈中，在函数返回后不会释放

在javascript中function 也是变量，记住这两点，闭包就理解了（感谢wusir的大力指导~）


假设我们现在要做一个关于电影操作的闭包练习，分析如下：
（1） 属性：电影名称，上映时间，票房
（2）动作：新增，删除，修改，查询电影

第一步：搭建闭包的架子

<script type="text/javascript">

var Movie = (
function() {
return function () {

}
}
)();

</script>

第二步：
（1）假设我们的代码封装在js中，让别人调用
（2）_ZMovie闭包函数承载的对象，其实是个函数
（3）真正让用户直接使用的是执行_ZMovie()函数后的对象，ZMovie

<script type="text/javascript">

var _ZMovie = (
function() {//1.定义的匿名函数体，就是外围函数
var movie = new Object();//2.外围函数中的变量，外部是无法访问的
return function () {//3.返回的是一个内部函数体，一旦执行了这个内部函数体，我们返回的就是一个对象，这边有点难以理解
var _datas = new Array();
var movie_add = function (_name,_date,_office) {
movie.name = _name;
movie.date = _date;
movie.office = _office;

_datas[0] = movie;
}
movie.add = movie_add;
movie.datas = _datas;

return movie;
}
}
)();

var ZMovie = _ZMovie();
ZMovie.add('神探夏洛克','2014-01-05',1000000);
var datas = ZMovie.datas;
for(var i = 0; i < datas.length; i++) {
alert(datas[i].name);
alert(datas[i].date);
alert(datas[i].office);
}

</script>

写这个例子的时候，自己也是瞎拼凑出来的，存在的BUG和其他方法未写，大体的架子搭好，待续！
2014.01.05 01:51





<script type="text/javascript">
var _ZMovie = (function() {//1.定义的匿名函数体，就是外围函数
var movie = new Object();//2.外围函数中的变量，外部是无法访问的
var _datas = new Array();
return function() {//3.返回的是一个内部函数体，一旦执行了这个内部函数体，我们返回的就是一个对象，这边有点难以理解
var movie_add = function(_id, _name, _date, _office) {
var _m = new Object();
_m.id = _id;
_m.name = _name;
_m.date = _date;
_m.office = _office;

_datas[(_datas.length++)] = _m;
};

var movie_delete = function (queryJSON){
var rtnArray = new Array();
var queryArray = eval("("+queryJSON+")");//转换为json对象
if(queryArray != null && queryArray.length > 0) {

}
};

movie.addMovie = movie_add;
movie.deleteMovie = movie_delete;//delete为关键字
movie.datas = _datas;

return movie;
}
})();

var ZMovie = _ZMovie();
ZMovie.addMovie(1,'蝙蝠侠前传1：侠影之谜', '2014-01-05', 1000000);
ZMovie.addMovie(2,'蝙蝠侠前传2：黑暗骑士', '2014-01-05', 1000000);
ZMovie.addMovie(2,'蝙蝠侠前传2：黑暗骑士崛起', '2014-01-05', 1000000);
var datas = ZMovie.datas;
for ( var i = 0; i < datas.length; i++) {
alert(datas[i].id+"|"+datas[i].name+"|"+datas[i].date+"|"+datas[i].office);
}
ZMovie.deleteMovie("[{'id':1}]")
</script>

删除的方法待修改，待续！
2014.01.06 11:15

对于删除，采用了给对象增加【逻辑状态】的内部属性实现
1.这边需要注意的是json对象也是有办法取出其key，并且通过key获取对应的值，
2.对于对象取值可以通过obj[属性的方法]获取值

<script type="text/javascript">
var _ZMovie = (function() {//1.定义的匿名函数体，就是外围函数
var movie = new Object();//2.外围函数中的变量，外部是无法访问的
var _datas = new Array();
return function() {//3.返回的是一个内部函数体，一旦执行了这个内部函数体，我们返回的就是一个对象，这边有点难以理解
var movie_add = function(_id, _name, _date, _office) {
var _m = new Object();
_m.id = _id;
_m.name = _name;
_m.date = _date;
_m.office = _office;
_m._state = 'U';

_datas[(_datas.length++)] = _m;
};

var movie_delete = function(queryJSON) {
var rtnArray = new Array();
var queryObj = eval("(" + queryJSON + ")");//转换为json对象
if (queryObj != null) {
for ( var key in queryObj) {
for ( var i = 0; i < this.datas.length; i++) {
if (this.datas[i][key] == queryObj[key]) {
this.datas[i]._state = 'E';
}
}
}
}
};

var movie_query = function () {
var rtnArray = new Array();
var j = 0;
for(var i = 0; i < this.datas.length; i++) {
if(this.datas[i]._state == 'U') {
rtnArray[j++] = this.datas[i];
}
}
return rtnArray;
};

movie.addMovie = movie_add;
movie.deleteMovie = movie_delete;//delete为关键字
movie.queryMovie = movie_query;
movie.datas = _datas;

return movie;
}
})();

var ZMovie = _ZMovie();
ZMovie.addMovie(1, '蝙蝠侠前传1：侠影之谜', '2014-01-05', 1000000);
ZMovie.addMovie(2, '蝙蝠侠前传2：黑暗骑士', '2014-01-05', 1000000);
ZMovie.addMovie(3, '蝙蝠侠前传3：黑暗骑士崛起', '2014-01-05', 1000000);
var datas = ZMovie.queryMovie();

for ( var i = 0; i < datas.length; i++) {
alert(datas[i].id + "|" + datas[i].name + "|" + datas[i].date + "|"
+ datas[i].office + "|" + datas[i]._state);
}

ZMovie.deleteMovie("{'id':1}");

var datas = ZMovie.queryMovie();

for ( var i = 0; i < datas.length; i++) {
alert(datas[i].id + "|" + datas[i].name + "|" + datas[i].date + "|"
+ datas[i].office + "|" + datas[i]._state);
}
</script>

javascript的闭包总结：
概念（专业）：闭包是 函数的局部变量集合，并且集合中的元素滞留在堆栈中，在函数返回后不会释放
概念（通俗）：
第一层理解：就是将内部变量呈现到全局的方法
第二层理解：结合java对象进行讲解，比如某个业务层对外提供的方法可能只有几个，也就是我们所关心的，但是我们并不关注这些业务逻辑使用到了那些属性以及时如何实现的，便于我们更好的协同运作，那么我们怎么在js中实现呢，就是一个又一个对外提供的js文件，这个时候我们可以使用闭包实现，比如我们例子中的Movie对象，我们可能就是新增，删除，查询等操作，我们可能也就是关心这些方法，但是对于他的属性（可能我们还需要一些特定的属性，比如逻辑状态）我们是不关心的，所以闭包就是封装住了内部属性，对外提供一些可用方法进行操作！

 

转载于:https://my.oschina.net/u/2402990/blog/490475