1、什么是闭包
闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。闭包的特点:
1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状态。
2. 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。
简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。
2、闭包的几种写法和用法
首先要明白,在JS中一切都是对象,函数是对象的一种。下面先来看一下闭包的5种写法,简单理解一下什么是闭包。后面会具体解释。
//第1种写法
function Circle(r) {
this.r = r;
}
Circle.PI = 3.14159;
Circle.prototype.area = function() {
return Circle.PI * this.r * this.r;
}
var c = new Circle(1.0);
alert(c.area());
这种写法没什么特别的,只是给函数添加一些属性。
//第2种写法
var Circle = function() {
var obj = new Object();
obj.PI = 3.14159;
obj.area = function( r ) {
return this.PI * r * r;
}
return obj;
}
var c = new Circle();
alert( c.area( 1.0 ) );
这种写法是声明一个变量,将一个函数当作值赋给变量。
//第3种写法
var Circle = new Object();
Circle.PI = 3.14159;
Circle.Area = function( r ) {
return this.PI * r * r;
}
alert( Circle.Area( 1.0 ) );
这种方法最好理解,就是new 一个对象,然后给对象添加属性和方法。
//第4种写法
var Circle={
"PI":3.14159,
"area":function(r){
return this.PI * r * r;
}
};
alert( Circle.area(1.0) );
这种方法使用较多,也最为方便。var obj = {}就是声明一个空的对象。
总的来说,上面几种方法,第2中和第4中较为常见,大家可以根据习惯选择。
上面代码中出现了JS中常用的Prototype,那么Prototype有什么用呢?下面我们来看一下:
var dom = function(){
};
dom.Show = function(){
alert("Show Message");
};
dom.prototype.Display = function(){
alert("Property Message");
};
dom.Display(); //error
dom.Show();
var d = new dom();
d.Display();
d.Show(); //error
我们首先声明一个变量,将一个函数赋给他,因为在Javascript中每个函数都有一个Portotype属性,而对象没有。添加两个方法,分别直接添加和添加打破Prototype上面,来看下调用情况。分析结果如下:
1、不使用prototype属性定义的对象方法,是静态方法,只能直接用类名进行调用!另外,此静态方法中无法使用this变量来调用对象其他的属性!
2、使用prototype属性定义的对象方法,是非静态方法,只有在实例化后才能使用!其方法内部可以this来引用对象自身中的其他属性!
var dom = function(){
var Name = "Default";
this.Sex = "Boy";
this.success = function(){
alert("Success");
};
};
alert(dom.Name);
alert(dom.Sex);
大家先看看,会显示什么呢? 答案是两个都显示Undefined,为什么呢?这是由于在Javascript中每个function都会形成一个作用域,而这些变量声明在函数中,所以就处于这个函数的作用域中,外部是无法访问的。要想访问变量,就必须new一个实例出来。
var html = {
Name:'Object',
Success:function(){
this.Say = function(){
alert("Hello,world");
};
alert("Obj Success");
}
};
再来看看这种写法,其实这是Javascript的一个"语法糖",这种写法相当于:
var html = new Object();
html.Name = 'Object';
html.Success = function(){
this.Say = function(){
alert("Hello,world");
};
alert("Obj Success");
变量html是一个对象,不是函数,所以没有Prototype属性,其方法也都是公有方法,html不能被实例化。否则会出现如下错误:
但是他可以作为值赋给其它变量,如var o = html; 我们可以这样使用它:
var s = new html.Success();
s.Say();
//还可以写到外面
html.Success.prototype.Show = function(){
alert("HaHa");
};
var s = new html.Success();
s.Show();
事实上,通过使用闭包,我们可以做很多事情。比如模拟面向对象的代码风格;更优雅,更简洁的表达出代码;在某些方面提升代码的执行效率。
作用域
如下的()();结构就是封闭作用域
var age=5;
(function () {
var age = 18;
console.log(age);
})();
(function () {
console.log(age);
})();
<body>
<button id="btn">点我</button>
<script type="text/html">
var num = 3;
(function () {
(function () {
(function () {
var num = 2;
age.log(age);
(function () {
var age = 18;
console.log(num);
})();
})();
})();
})();
</script>
<script>
(function () {
var btn = document.getElementById("btn");
var btn1 = document.getElementById("btn");
var btn2 = document.getElementById("btn");
var btn3 = document.getElementById("btn");
var btn4 = document.getElementById("btn");
btn.onclick = function () {
alert(0);
}
})();
(function () {
var d = document;
var btn = d.getElementById("btn");
var btn1 = d.getElementById("btn");
var btn2 = d.getElementById("btn");
var btn3 = d.getElementById("btn");
var btn4 = d.getElementById("btn");
})();
(function (document) {
var btn = document.getElementById("btn");
var btn1 = document.getElementById("btn");
var btn2 = document.getElementById("btn");
var btn3 = document.getElementById("btn");
var btn4 = document.getElementById("btn");
})(document);
/*var num = 0;
for(var k in window){
num++;
document.write(k + "," + num + "<br/>")
}*/
</script>
</body>