JavaScript设计模式之:JavaScript闭包

Tags: javascript

JavaScript设计模式的作用 提高代码的重用性,可读性,使代码更容易的维护和扩展。本文作者深入了分析JavaScript设计模式,不管是对初学者还是程序老人应该都会有所启迪。

本文分为5个部分:

  1. JavaScript设计模式之:JavaScript闭包

  2. JavaScript设计模式之:JavaScript 继承

  3. JavaScript设计模式之:桥接(bridge)模式

  4. JavaScript设计模式之:门面(facade)模式

  5. JavaScript设计模式之:代理(Proxy)模式


一直都在考虑这个月分享大家什么东西最好,原计划是打算写一些HTML5中JS方面的内容或者是AJAX方面的,可是自己由于表达能力,时间,还有个人工作方面的问题,这个还是等下个月再做分享吧。

老规矩,开始正文以前先交代自己写这篇文章的目的和一些注意事项

  1. 首先本人一直从事前端开发,所以除了JavaScript其他的语言了解不深,所以文章只会以JavaScript语言的角度去论证;

  2. 其实我个人在项目用过的模式也不多,对模式的概念的理解也没有那么抽象,所以最近在面试中如果面试官问到与模式相关的问题,自己感觉在对答过程中很郁闷,很多东西表达不清楚,于是就找了些相关资料,才会有这篇文章分享;

  3. JavaScript模式与前端的工作和成长密不可分,因为这确实不是一个简单的话题,所以我只能尽力用简单表达和例子阐明,而且园子里有很多的高手,所以希望大家踊跃发言(由于水平有限,请大家多多指教,希望嘴下留情);

  4. 由于这篇文章更多的只是想起到一个介绍和讲解的作用,并不打算对每种模式进行细致的分析,所以每种模式只用到一个至二个例子,可能会造成这个例子的表达并不是最优的或者不够全面,如果各位看官觉得不过瘾,可以再去查找相关资料;

  5. 做任何事都需要坚持,写博客也是一样,嘿嘿,每月至少一篇(文章确实较长,希望能对朋友们有所帮助,重点部分在前言中有介绍,大家可以选择感兴趣的模式进行深入)。

  6. 欢迎转载,不过请注明出处,谢谢。

了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过)

JavaScript闭包

  1. 闭包最常用的方式就是返回一个内联函数(何为内联函数?就是在函数内部声明的函数);

  2. 在JavaScript中有作用域和执行环境的问题,在函数内部的变量在函数外部是无法访问的,在函数内部却可以得到全局变量。由于种种原因,我们有时候需要得到函数内部的变量,可是用常规方法是得不到的,这时我们就可以创建一个闭包,用来在外部访问这个变量。

  3. 闭包的用途 主要就是上一点提到的读取函数内部变量,还有一个作用就是可以使这些变量一直保存在内存中。

  4. 使用闭包要注意,由于变量被保存在内存中,所以会对内存造成消耗,所以不能滥用闭包。解决方法是 在退出函数之前,将不使用的局部变量全部删除

最后还是上一套闭包的代码吧,这样更直观。

封装

通过将一个方法或者属性声明为私用的,可以让对象的实现细节对其他对象保密以降低对象之间的耦合程度,可以保持数据的完整性并对其修改方式加以约束,这样可以是代码更可靠,更易于调试。封装是面向对象的设计的基石。

尽管JavaScript是一门面向对象的语言,可它并不具备将成员声明为公用或私用的任何内部机制,所以我们只能自己想办法实现这种特性。下面还是通过一套完整的代码去分析,介绍什么是私有属性和方法,什么是特权属性和方法,什么是公有属性和方法,什么是公有静态属性和方法。

私有属性和方法

函数有作用域,在函数内用var 关键字声明的变量在外部无法访问,私有属性和方法本质就是你希望在对象外部无法访问的变量。

特权属性和方法

创建属性和方法时使用的this关键字,因为这些方法定义在构造器的作用域中,所以它们可以访问到私有属性和方法;只有那些需要直接访问私有成员的方法才应该被设计为特权方法。

共有属性和方法

直接链在prototype上的属性和方法,不可以访问构造器内的私有成员,可以访问特权成员,子类会继承所有的共有方法。

共有静态属性和方法

最好的理解方式就是把它想象成一个命名空间,实际上相当于把构造器作为命名空间来使用。

/* -- 封装 -- */ 
 var _packaging = function(){  
    //私有属性和方法  
    var name = 'Darren';  
    var method1 = function(){  
       //...  
    }  
    //特权属性和方法  
    this.title = 'JavaScript Design Patterns' ;  
    this.getName = function(){  
       return name;  
    }  
 }  
 //共有静态属性和方法  
 _packaging._name = 'Darren code';  
 _packaging.alertName = function(){  
    alert(_packaging._name);  
 }  
//共有属性和方法  
_packaging.prototype = {  
    init:function(){  
       //...  
    }  
 }

继续阅读:JavaScript设计模式之:JavaScript 继承

转自:http://www.cnblogs.com/Darren_code/archive/2011/08/31/JavascripDesignPatterns.html

本文链接:http://www.4byte.cn/learning/42859/javascript-she-ji-mo-shi-zhi-javascript-bi-bao.html



相关文章