JavaScript设计模式之一封装
我们会把现实中的一些事物抽象成一个Class并且把事物的属性(名词)作为Class的Property把事物的动作(动词)作为Class的methods。在面向对象的语言中(C#等)都会有一些关键字来修饰类或者属性(Private,public,protect),这些关键词描述了访问的权限,不多做解释。
我们来看看Javascript的易变的特性(我们还用上一次的例子):
var Man = function (name, age) { this.Name = name; this.Age = age; } var Person = new Interface("Person", ["GetName", "GetAge"]); Man.prototype = { GetName: function () { return this.Name; }, GetAge: function () { return this.Age; } } var Alan = new Man("Alan", 25); alert(Alan.GetAge()); Alan.DisplayAll = function () { return "Name: "+this.GetName() + "; Age: " + this.GetAge() } alert(Alan.DisplayAll());
我先创建了一个Class(Javascript的匿名方法)拥有2个公共的(public)的字段(本篇blog会详细讲解,继续往下看)和2个public的方法,我们创建了一个Instance--Alan,但是我可以为这个Instance动态的添加一个DisplayAll的方法,我想任何面向对象的语言是做不到这一点的,Javascript的灵活体现之一。
我们现在假设一个场景,如果有很多的程序员要用这段代码,由于Javascript的易变性,程序员就可以在实例化后改变Name的值,那初始化的动作就没有意义了:
var Alan = new Man("Alan", 25); Alan.Name = "Alice"; //悲剧了,我alert的时候变成Alice了 alert(Alan.GetName());
所以我们不能让外部的人去任意的修改这个字段,在Java或C#中我们只需要个这个字段改为Private,就万事OK了,但是Javascript没有这个关键词,那我们需要这么做呢,这就是这篇blog存在的意义
我们可以想下在C#除了设置Private之外我们还可以怎么做?我们可以设置Setter和Getter方法。
我们来修改下上面的代码:我们称方法一:
var Person = new Interface("Person", ["SetName", "SetAge", "GetName", "GetAge"]); var Man = function (name, age) { this.SetAge(age); this.SetName(name); } Man.prototype = { SetName: function (name) { this.Name = name; }, SetAge: function (age) { this.Age = age; }, GetName: function () { return this.Name; }, GetAge: function () { return this.Age; } } var Alan = new Man("Alan", 25); Alan.Name = "Alice"; //悲剧了,我alert的时候变成Alice了 Alan.SetAge(10);//悲剧,被别人把我的年龄给这么小 alert(Alan.GetName()); Alan.DisplayAll = function () { return "Name: "+this.GetName() + "; Age: " + this.GetAge() } alert(Alan.DisplayAll());
我们发现貌似样子很像C#中的Setter和Getter,但是还是可以被外部修改。但是从约束上来看,貌似比上面的code要好看些,通过方法来设置初始值。但是问题还是没有解决,我们来看看下面一种方法:闭包
//我需要解释一下,在Javascript中是通过This关键字来开发权限的(Public)。
在讲闭包之前,我们需要了解下闭包的本质: 在Javascript中,只有方法是有作用域的,如果在方法中声明的变量在外部是无法访问的,那Private的概念就出来了。
var Person = new Interface("Person", ["SetName", "SetAge", "GetName", "GetAge"]); var Man = function (newname, newage) { var name, age; this.SetName = function (newname) { name = newname; } this.SetAge = function (newage) { age = newage; } this.GetName = function () { return name; } this.GetAge = function () { return age; } this.SetAge(newage); this.SetName(newname); } var Alan = new Man("Alan", 25); Alan.name="Alice"; //现在name是private了,我是无法去修改的 Alan.SetAge(10); //悲剧,被别人把我的年龄给这么小 alert(Alan.GetAge());
现在私有的功能就实现了,我们只是用Var来代替了This而已。//我们把公共(Public)并且可以访问Private的方法称为特权方法,比如上面的this.SetName, this.SetAge.
如果我们的公共方法不涉及到访问Private的字段,那我们可以把他们放到Prototype中。//好处是多个实例的时候内存中也只有一分拷贝
Man.prototype.DisplayAll = function () { return "Name: " + this.GetName() + "; Age: " + this.GetAge() }
哈哈~我们来看下稍微有点难度的东西:静态变量和方法
我们都是知道静态的东西属于类(Class),我们来修改下上面的代码:
var Person = new Interface("Person", ["SetName", "SetAge", "GetName", "GetAge","GetCount"]); var Man = (function () { var count = 0; return function (newname, newage) { var name, age; this.SetName = function (newname) { name = newname; } this.SetAge = function (newage) { age = newage; } this.GetName = function () { return name; } this.GetAge = function () { return age; } this.GetCount = function () { return count; } this.SetAge(newage); this.SetName(newname); count++; } })(); Man.prototype.DisplayAll = function () { return "Name: " + this.GetName() + "; Age: " + this.GetAge() } var Alan1 = new Man("Alan", 25); var Alan2 = new Man("Alan", 25); alert("There are "+Alan2.GetCount()+" instances of Man" );
上一篇: jQuery+json实现动态创建复杂表格table的方法
下一篇: 防止SQL注入攻击
推荐阅读
-
javascript常用的设计模式
-
PHP设计模式(三)封装
-
JavaScript设计模式之单例模式原理与用法实例分析
-
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
-
JavaScript设计模式之原型模式分析【ES5与ES6】
-
Javascript设计模式-工厂模式
-
前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
-
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
-
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
-
javascript设计模式之对象工厂函数与构造函数详解