Js的封装和闭包
一直很怀疑自己是否真的懂Js,是不是用Js实现几个选项卡的切换,修改下html的css就算是会了,对于这点,自己都无法认可
今天很想对之前写的Js做个提炼,但对于Js的封装和闭包一直理解不透彻,没法理解,那就只有多写了
Js封装(即面向对象,不懂面向对象思想的同学不用向下看了)
js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但可以利用js的闭包封装机制来实现js类, 封装一个简的
CharlesObj类.
function
CharlesObj() {
this.show = function(){alert(" CharlesObj show");};
this.init = function(){alert(" CharlesObj init");};
}
这个类里定义了两个方法:show和init, 需要注意的是这里用到了this来声明, 而不是var, 因为用var是用来定义私有方法的.
这个类里定义了两个方法:show和init, 需要注意的是这里用到了this来声明, 而不是var, 因为用var是用来定义私有方法的.
以下是对封装的js类调用
var
cj =
new
CharlesObj(
);
cj.show
();
cj.init
();
这样看来貌似封装也不过如此,但如果我们有在网上找过Js代码或者插件的话,经常会在代码中看到类似这样的代码
(function(){
alert("...");
......
});
这样的代码其实就是所谓的闭包了,那么闭包在js中究竟起个什么作用?
我们如果问朋友或查资料通常得到的都是:闭包就是指变量在某个作用域上的值,这个变量只在这个作用域上起作用。闭包对变量而言,闭包指某个作用域。
一直很奇怪,如果是作用域的问题,完全可以用全局变量和局部变量来解决,为何还专门要搞个闭包出来,这不是闲的蛋疼;
直到前面有次调用百度地图api的实现多覆盖物标注时遇到个问题:
百度地图api提供地图标注功能,但并没有提供根据赋值ID或某唯一标识来区分不同的覆盖物,这就存在一个问题,我们不可能永远在地图上只标一个点,当时第一个想法是创建多个全局变量保存覆盖物对象,这个想法一冒出就觉的要这么干,就太2b了点,继续想别的方法,后来有人说用闭包,在闭包里面直接绑定事件,虽然不怎么理解,但依葫芦画瓢先搞定功能再说,结果当然是目的达到了,但还是不清楚为啥,闭包就行;今天想将js提炼下,前提自然得将这些东东在了解下,不然提炼出来的还是这种垃圾代码!所谓磨刀不误砍柴工,终于让我看到,原来闭包中的值会一直存在于内存中,还是来个demo说明下问题:
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。
既然了解了闭包值会一直存在于内存中,那么自然我们不能滥用闭包,否则会大大增加内存的消耗
既然了解了闭包值会一直存在于内存中,那么自然我们不能滥用闭包,否则会大大增加内存的消耗
本文仍是在本人似懂非懂下写的,主要想看下自己究竟是否真正理解,许多东西我们听上去挺简单,但往往我们很久之后还是不会,原因很大一部分是因为我们的动手能力太差,此句仅说给自己听