在JavaScript中实现类的方式探讨


Posted in Javascript onAugust 28, 2013

在 javascript 中有很多方式来创建对象,所以创建对象的方式使用起来非常灵活。那么,到底哪一种方式是最恰当的对象创建方式呢?构造模式,原型模式还是对象原意模式(Object literal)呢?

但这些模式具体是怎么回事呢?

在开始讲解之前,让我们先清楚地介绍一下关于 javascript 基本知识。

有没有可能在 javascript 中实现面向对象编程的方式呢?

答案是可能的,javascript 是可以创建对象的!这种对象可以包含数据及能够操作数据的方法,甚至可以包含其他对象。它没有类但拥有构造函数;它没有类继承机制,但是可以通过原型(prototype)实现继承。

现在看起来,我们已经了解了在 javascript 中创建对象及实现基于对象编程时所必须的组成部分。

我们都知道 javascript 拥有私有变量。一个通过“var”关键字定义的变量,只能在函数体中被访问,而不能在函数外被访问。那么,如果我们不通过使用“var”关键字来定义变量会怎样呢?我们现在不对这个问题进行深入探讨,可能是通过“this”进行访问的,我会在另外的时间来详细讲述这个问题。

现在回到之前的问题。到底哪一种方式是最恰当的对象创建方式呢?
让我们用已经知晓的知识,通过创建Person的对象是来试验一下。

var Person = { 
firstName : 'John', 
lastName : 'Cody', 
fullName : '', 
message : '', createFullName : function () { 
fullName = this.firstName + ' ' + this.lastName; 
}, 
changeMessage : function (msg) { 
this.message = msg; 
}, 
getMessage : function () { 
this.createFullName(); 
return this.message + ' ' + fullName; 
} 
} 
Person.firstName = 'Eli'; 
Person.lastName = 'Flowers' 
Person.changeMessage('welcome'); 
var message = Person.getMessage(); // welcome Eli Flowers 
alert(message);

这是对象原意模式(literal pattern)。这非常接近我们常创建对象的方式。如果你不需要关心私有/包装的成员,并且你知道不将创建这个对象的实例。那么,这种方式将会很适合你。公有的成员可以做所有私有成员的事情,不是吗?但是,这不是一个类,而是一个对象而已,不能被创建实例并且不能被继承。

让我们尝试下其他的方面:

var Person = { 
firstName : 'John', 
lastName : 'Cody', 
fullName : '', 
message : '', createFullName : function () { 
fullName = this.firstName + ' ' + this.lastName; 
}, 
changeMessage : function (msg) { 
this.message = msg; 
}, 
getMessage : function () { 
this.createFullName(); 
return this.message + ' ' + fullName; 
} 
} 
Person.firstName = 'Eli'; 
Person.lastName = 'Flowers' 
Person.changeMessage('welcome'); 
var message = Person.getMessage(); // welcome Eli Flowers 
alert(message);

这是一种构造模式的实例(Constructor Pattern)。那么,这是类还是对象呢?应该 两种都算是吧。我们能够在当请求时把它当做对象Person来使用。它毕竟也只是一个函数而已。然而,它可以通过使用“new”关键字来实现创建新的实例功能。

在使用这种方式时,我们需要时刻记住如下要点:

1. 无论什么时候这个函数被调用时,它拥有一个特别的变量叫做“this”并且可以在全局范围内使用。全局范围依赖于这个函数自身的作用范围。

2. 无论什么时候通过“new”关键字创建这个函数的实例,“this”变量指向这个函数本身,并且这个“new”操作将会影响到函数体中的代码被执行。这也正是构造模式。

3. 任何附加到“this”变量下的变量都会成为公有属性并且任何通过“var”关键字定义的变量都将是属于私有属性。

4. 一个附加到“this”下的函数叫做特权函数,它可以访问所有的私有变量以及被附加到“this”下的函数及变量。

5. 私有函数可以访问到其他私有变量及私有函数。

6. 私有函数不能直接访问被附加到“this”变量和函数。我们可以通过创建一个私有变量“_that”并且将它赋值为“this”的方式实现。

7. 任何私有变量及函数对于其他私有函数及其他被附加到“this”的函数是可用的。这完全是可能的再javascript的作用范围下。

8. 一个变量:不是通过“var”关键字,也不是附加到“this”变量上以获得全局作用范围的。例如,对于一个自定义函数的作用范围。需要再一次地了解作用域及集群的知识。

这已经实现了我们想要的大部分要求了,但是,有时候“this”和“that”这两个入口变量很容易造成给人们带来疑惑。尤其对于那些一直坚持要求纯粹私有的人来说,更容易迷惑。

让我们再稍微修改下试试吧。

var Person = function () { //private 
var firstName = 'John'; 
var lastName = 'Cody'; 
var fullName = ''; 
var message = ''; 

var createFullName = function () { 
fullName = firstName + ' ' + lastName; 
} 
//public setters 
var setMessage = function (msg) { 
message = msg; 
} 
var setFirstName = function (fName) { 
firstName = fName; 
} 
var setLastName = function (lName) { 
lastName = lName; 
} 
var getMessage = function () { 
createFullName(); 
return message + ' ' + fullName; 
} 
//functions exposed public 
return { 
setFirstName: setFirstName, 
setLastName: setLastName, 
setMessage: setMessage, 
getMessage: getMessage 
}; 
}; 
var person1 = new Person(); 
person1.setFirstName('Eli'); 
person1.setLastName('Flowers'); 
person1.setMessage('welcome'); 
var message = person1.getMessage(); // welcome Eli Flowers 
alert(message);

这是一个显示模式(Revealing Pattern)。非常感谢 Christian Heilmann。使用这种模式的方式就是把请求的"getters" 和 "setters" 当作属性使用。我们很多都是从传统的Java编程中找到这样的身影并且很明显地知道实现它其实并不复杂。这同样是一种类似于当类继承自一个接口的情况。

这种模式大部分方面都实现得很好,仅仅只有一个很微小的问题。每一次当一个类的实例被创建时。这个新创建的对象获得了一份变量和函数的拷贝。现在,拷贝变量是没有问题的,我们希望对于每一个对象的数据都是属于对象自身的,那么,成员函数呢?他们仅仅是操作数据而已。那么,为什么需要拷贝他们呢?

这正是原型模式(Prototype)的优势所在。在所有实例中,所有东西都是被创建成一个原型,并且能够相互分享。我们仅仅需要做的就是依据原型创建共有函数。

var Person = function () { //private 
var welcomeMessage = 'welcome'; 
var fullName = ''; 
var firstName = ''; 
var lastName = ""; 
var createFullName = function () { 
Person.prototype.setFirstName('asdsad'); 
fullName = firstName + ' ' + lastName; 
}; 
//constructor 
var Person = function () { }; //will be created evrytime 
//public 
Person.prototype = { 
getFullName: function () { 
createFullName(); 
return welcomeMessage + ' ' + fullName; 
}, 
setFirstName: function (fName) { 
firstName = fName; 
}, 
setLastName: function (lName) { 
lastName = lName; 
}, 
ChangeMessage: function (mesg) { 
welcomeMessage = mesg; 
} 
} 
return new Person(); // Person; //new Person(); 
}; 

var person1 = new Person(); 
person1.setFirstName ('Eli'); 
person1.setLastName('Flowers'); 
person1.ChangeMessage('welcome'); 
var message = person1.getFullName(); // welcome asdsad Flowers 
alert(message);

原型模式存在的一个问题是它不能访问私有变量及私有函数,正因为这个问题,我们才会介绍闭包以及始终组织好创建类中存在的代码以使得它在全局范围内不会变得很混乱。所有都是属于 Person 类的作用范围内。

另外一个问题是每一次实例被创建时,全部的代码都被执行一遍,包括原型的绑定。对于我们中的一部分人来说,这仅仅只是一个效率问题。处理好这个问题的一种方式是仅仅在期望共有函数不可用的情况下绑定这个原型。

这样将会使得绑定原型操作只会在第一个实例被创建时执行,并且在那之后所有其他的实例都将只会进行检查操作。不幸的是,这样还是不能解决我们在上面例子中提到的问题,因为我们只有重新再来一次创建的函数用于生成一个闭包来达到这个类的效果。这样的话,至少我们减少了一部分内存的使用。

等等,还有另外一个问题是私有函数不能直接访问原型函数。

为什么你们一定得需要私有函数和私有变量呢?我知道你一定是想实现类的封装性,想确保类中的属性或者内部的数据不会被突然地修改了或者被内部的其他程序所修改,或者任何其他的操作……

你应该记住你是不能将 javascript 代码编译成二进制的,对于这种情况,你在一定程度上很恼火吧,这样代码始终都是可用的。所以,如果任何人想搅乱代码的话,不管你真正实现私有或者没有实现私有,不管你将代码给团队中的其他成员或者卖出去,他们都可以搅乱代码。实现私有化可能有那么一点点帮助吧。

另一个其他编程者使用的技术是使用约定命名,使用下划线 “_”给所有你想设成私有任何的东西加上前缀以规定它成为私有。

(function () { 
var Person = function () { 
this._fullName = ''; 
this.welcomeMessage = ''; 
this.firstName = ''; 
this.lastName = ""; 
_that = this; this._createFullName = function () { 
this.ChangeMessage('Namaste'); 
this._fullName = this.firstName + ' ' + this.lastName; 
}; 
} 
//Shared Functions for Code optimization 
Person.prototype = { 
constructor: Person, 
getFullName: function () { 
this._createFullName(); 
return this.welcomeMessage + ' ' + this._fullName; 
}, 
ChangeMessage: function (mesg) { 
this.welcomeMessage = mesg; 
} 
} 
this.Person = Person; 
})(); 
var person1 = new Person(); 
person1.firstName = 'Eli'; 
person1.lastName = 'Flowers'; 
person1.ChangeMessage('Welcome'); 
var message = person1.getFullName(); // Namaste Eli Flowers 
alert(message);

我不是说你不应该考虑 “private” 或者类似的知识。你是代码的设计者,所以你将知道怎么来管理并且知道怎么做才是最好的。根据你的需求,你可以使用任何一种设计模式或者多个设计模式组合一起使用。

无论你决定采用哪种设计模式,始终记住做尽量少的事情,不要在全局作用范围内实现闭包,尽量减少内存泄露,以及优化代码,并且组织好代码。所以,尽量多了解些作用域,闭包以及 “this” 的表现行为。

最后,祝编程愉快!

译后感

经常使用 javascript,对于它的印象一直都是直接拷贝过来就可以用的。最近使用 extjs,它的类框架非常好用。从这样文章也明白在 javascript 中实现类的各种方式,以及在文章最后讨论了类中私有成员的实现情况。

Javascript 相关文章推荐
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 #Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 #Javascript
JQuery筛选器全系列介绍
Aug 27 #Javascript
HTML Color Picker(js拾色器效果)
Aug 27 #Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 #Javascript
javascript:void(0)使用探讨
Aug 27 #Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 #Javascript
You might like
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
很棒的vue弹窗组件
2017/05/24 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
Python3遍历目录树实现方法
2015/05/22 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
时尚休闲吧创业计划书
2014/01/25 职场文书
见习期自我鉴定
2014/01/31 职场文书
开学季活动策划方案
2014/02/28 职场文书
初一学生期末评语
2014/04/24 职场文书
小学教师自我评价
2015/03/04 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫