什么是闭包和闭包的几种写法和用法
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 = {} 就是声明一个空的对象.
- // 第 5 种写法
- var Circle = new Function("this.PI = 3.14159;
- this.area = function( r ) {return r*r*this.PI;}");
- alert( (new Circle()).area(1.0) );
说实话, 这种写法我是没用过, 大家可以参考一下.
总的来说, 上面几种方法, 第 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 来引用对象自身中的其他属性!
来源: http://www.css88.com/web/javascript/10982.html