关于JavaScript定义类和对象的几种方式


Posted in Javascript onNovember 09, 2010

可以看看这个例子:

var a = 'global'; 
(function () { 
alert(a); 
var a = 'local'; 
})();

大家第一眼看到这个例子觉得输出结果是什么?‘global'?还是‘local'?其实都不是,输出的是undefined,不用迷惑,我的题外话就是为了讲这个东西的。
其实很简单,看一看JavaScript运行机制就会明白。我们可以把这种现象看做“预声明”。但是如果稍微深究一下,会明白得更透彻。

这里其实涉及到对象属性绑定机制。因为所有JavaScript函数都是一个对象。在函数里声明的变量可以看做这个对象的“类似属性”。对象属性的绑定在语言里是有分“早绑定”和“晚绑定”之分的。

【早绑定】
是指在实例化对象之前定义其属性和方法。解析程序时可以提前转换为机器代码。通常的强类型语言如C++,java等,都是早绑定机制的。而JavaScript不是强类型语言。它使用的是“晚绑定”机制。

【晚绑定】
是指在程序运行前,无需检查对象类型,只要检查对象是否支持特性和方法即可。可以在绑定前对对象执行大量操作而不受任何惩罚。
上面代码出现的“预声明”现象,我们大可用“晚绑定”机制来解释。在函数的作用域中,所有变量都是“晚绑定”的。 即声明是顶级的。所以上面的代码和下面的一致:

var a = 'global'; 
(function () { 
var a; 
alert(a); 
a = 'local'; 
})();

在alert(a)之前只对a作了声明而没有赋值。所以结果可想而知。

<!-- 题外话到此结束 -->

RT:本文要说的是,在JavaScript里,我所知道的几种定义类和对象的方式:<! -- 声明:以下内容大部分来自《JavaScript高级程序设计》,只是个人叙述方式不同而已 -- >

【直接量方式】

使用直接量构建对象是最基础的方式,但也有很多弊端。

var Obj = new Object; 
Obj.name = 'sun'; 
Obj.showName = function() { 
alert('this.name'); 
}

我们构建了一个对象Obj,它有一个属性name,一个方法showName。但是如果我们要再构建一个类似的对象呢?难道还要再重复一遍?
NO!,我们可以用一个返回特定类型对象的工厂函数来实现。就像工厂一样,流水线的输出我们要的特定类型结果。

【工厂方式】

function createObj(name) { 
var tempObj = new Object; 
tempObj.name = name; 
tempObj.showName = function () { 
alert(this.name); 
}; 
return tempObj; 
} 
var obj1 = createObj('obj_one'); 
var obj2 = createObj('obj_two');

这种工厂函数很多人是不把他当做构建对象的一种形式的。一部分原因是语义:即它并不像使用了运算符new来构建的那么正规。还有一个更大的原因,是因为这个工厂每次产出一个对象都会创建一个新函数showName(),即每个对象拥有不同的版本,但实际上他们共享的是同一个函数。
有些人把showName在工厂函数外定义,然后通过属性指向该方法,可以避开这个问题:
function showName () { 
alert(this.name); 
} 
function createObj(name) { 
var tempObj = new Object; 
tempObj.name = name; 
tempObj.showName = showName; 
return tempObj; 
} 
var obj1 = createObj('obj_one'); 
var obj2 = createObj('obj_two');

可惜的是,这种方式让showName()这个函数看起来不像对象的一个方法。

【构造函数方式】
这种方式是为了解决上面工厂函数的第一个问题,即没有new运算符的问题。可是第二个问题它依然不能解决。我们来看看。

function Obj(name) { 
this.name = name; 
this.showName = function () { 
alert(this.name); 
} 
} 
var obj1 = new Obj('obj_one'); 
var obj2 = new Obj('obj_two');

它的好处是不用在构造函数内新建一个对象了,因为new运算符执行的时候会自动创建一个对象,并且只有通过this才能访问这个对象。所以我们可以直接通过this来对这个对象进行赋值。而且不用再return,因为this指向默认为构造函数的返回值。
同时,用了new关键字来创建我们想要的对象是不是感觉更“正式”了。
可惜,它仍然不能解决会重复生成方法函数的问题,这个情况和工厂函数一样。

【原型方式】
这种方式对比以上方式,有个很大的优势,就是它解决了方法函数会被生成多次的问题。它利用了对象的prototype属性。我们依赖原型可以重写对象实例。

var Obj = function () {} 
Obj.prototype.name = 'me'; 
Obj.prototype.showName = function () { 
alert(this.name); 
} 
var obj1 = new Obj(); 
var obj2 = new Obj();

我们依赖原型对构造函数进行重写,无论是属性还是方法都是通过原型引用的方式给新建的对象,因此都只会被创建一次。可惜的是,这种方式存在两个致命的问题:
1。没办法在构建对象的时候就写入想要的属性,因为原型在构造函数作用域外边,没办法通过传递参数的方式在对象创建的时候就写入属性值。只能在对象创建完毕后对值进行重写。
2。致命问题在于当属性指向对象时,这个对象会被多个实例所共享。考虑下面的代码:
var Obj = function () {} 
Obj.prototype.name = 'me'; 
Obj.prototype.flag = new Array('A', 'B'); 
Obj.prototype.showName = function () { 
alert(this.name); 
} 
var obj1 = new Obj(); 
var obj2 = new Obj(); 
obj1.flag.push('C'); 
alert(obj1.flag); // A,B,C 
alert(obj2.flag); //A,B,C

是的,当flag属性指向对象时,那么实例obj1和obj2都共享它,哪怕我们仅仅改变了obj1的flag属性,但是它的改变在实例obj2中任然可见。
面对这个问题,让我们不得不想是否应该把【构造函数方式】和【原型方式】结合起来,让他们互补。。。

【构造函数和原型混合方式】
我们让属性用构造函数方式创建,方法用原型方式创建即可:

var Obj = function (name) { 
this.name = name; 
this.flag = new Array('A', 'B'); 
} 
Obj.prototype = { 
showName : function () { 
alert(this.name); 
} 
} 
var obj1 = new Obj(); 
var obj2 = new Obj(); 
obj1.flag.push('C'); 
alert(obj1.flag); // A,B,C 
alert(obj2.flag); //A,B

这种方式有效地结合了原型和构造函数的优势,是目前用的最多,也是副作用最少的方式。
不过,有些追求完美的家伙还不满足,因为在视觉上还没达到他们的要求,因为通过原型来创建方法的过程在视觉上还是会让人觉得它不太像实例的方法(尤其对于传统OOP语言的开发者来说。)
所以,我们可以让原型活动起来,让他也加入到构造函数里面去,好让这个构造函数在视觉上更为统一。而这一系列的过程只需用一个判断即可完成。
var Obj = function (name) { 
this.name = name; 
this.flag = new Array('A', 'B'); 
if (typeof Obj._init == 'undefined') { 
Obj.prototype = { 
showName : function () { 
alert(this.name); 
} 
}; 
Obj._init = true; 
} 
}

如上,用_init作为一个标志来判断是否已经给原型创建了方法。如果是那么就不再执行。这样其实在本质上是没有任何变化的,方法仍是通过原型创建,唯一的区别在于这个构造函数看起来“江山统一”了。
但是这种动态原型的方式是有问题的,《JavaScript高级程序设计》里并没有深究。创建第一个对象的时候会因为prototype在对象实例化之前没来的及建起来,是根本无法访问的。所以第一个对象是无法访问原型方法的。同时这种方式在子类继承中也会有问题。
关于解决方案,我会在下一文中说明。

其实就使用方便来说的话,个人觉得是没必要做这个判断的。。。呵呵 ^_^

Javascript 相关文章推荐
js自定义事件代码说明
Jan 31 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 #Javascript
一个javascript图片阅览组件
Nov 09 #Javascript
js中格式化日期时间型数据函数代码
Nov 08 #Javascript
window.location.hash 使用说明
Nov 08 #Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 #Javascript
JavaScript游戏之优化篇
Nov 08 #Javascript
javascript开发中因空格引发的错误
Nov 08 #Javascript
You might like
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
arguments对象
2006/11/20 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
python用post访问restful服务接口的方法
2018/12/07 Python
python用Configobj模块读取配置文件
2020/09/26 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
党员创先争优活动总结
2014/05/04 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
村安全生产责任书
2014/08/25 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
单位作风建设自查报告
2014/10/23 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
领导干部失职检讨书
2015/05/05 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
Python制作动态字符画的源码
2021/08/04 Python
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js