- 浏览: 58611 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
DiaoCow:
请教下作者,我想用F3替代ctrl+]用来查找函数定义,在vi ...
使用ctags和vim快速查看内核源代码 -
jackykennedy:
非常感谢。
中国手机开发者联盟CMD100 邀请码 -
ruler_internet:
非常不错,这个方法可行
Javascript 封装 HashMap
在说这个话题之前,我想先说几句题外话:最近偶然碰到有朋友问我“hoisting”的问题。即在js里所有变量的声明都是置顶的,而赋值则是在之后发生的。可以看看这个例子:
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在对象实例化之前没来的及建起来,是根本无法访问的。所以第一个对象是无法访问原型方法的。同时这种方式在子类继承中也会有问题。
关于解决方案,我会在下一文中说明。
其实就使用方便来说的话,个人觉得是没必要做这个判断的。。。呵呵 ^_^
转帖来自:http://www.cnblogs.com/hongru/archive/2010/11/08/1871359.html
发表评论
-
对国内4个常用CDN公共库加速服务的简单测试
2014-09-24 21:31 809由于本人的香港主机带宽较小,所以考虑使用国内的一些CDN公共 ... -
eclipse 忽略jquery压缩文件报错
2013-11-26 19:53 474Project -> Properties -> ... -
时间转换
2013-08-26 13:24 526/* * Unix timestamp -> 普通 ... -
jQuery.proxy可以往函数里传参
2013-08-06 10:33 786for (j = td_counter; j < row ... -
扩展prototype.js Object.deepExtend深度扩展
2013-07-29 23:08 717Object.deepExtend = function(d ... -
prototype.js1.7.1在IE下getOffsetParent()会返回body
2013-07-29 20:32 572prototype1.7.1在IE下getOffsetPar ... -
Javascript string repeat 重复拼写字符串
2013-07-17 17:31 375function repeat(s, n){ va ... -
Javascript 判断本地文件是否存在
2013-04-15 14:42 875function fileExists(url) { ... -
可以参考的javascript编码风格
2013-03-22 23:04 299https://github.com/aralejs/aral ... -
javascript 禁止鼠标右键
2013-03-22 13:29 518function doProhibit() { if( ... -
Javascript 浏览器设备识别
2012-08-28 10:29 786<!DOCTYPE html> <h ... -
javascript 两个感叹号
2012-04-24 12:31 665var foo1, foo2 = 0, foo3 = ... -
javascript的call()与apply()
2012-04-22 19:08 507call方法: 语法:call([thisObj[, ... -
arguments.callee 调用自身
2012-04-21 18:37 543一、Arguments 该对象代表正在执行的函数和调 ... -
javascript callback
2012-04-21 12:15 614<html> <head> ... -
Keycode大全
2012-03-22 14:33 688//13 enter 58 : //32 ... -
JavaScript面向对象编程
2012-02-29 22:40 647转自:http://sd.csdn.net/a/2012011 ... -
Javascript 实现 php的 ip2long long2ip
2012-02-29 13:09 1765$ip = "192.0.34.166&quo ... -
JavaScript实现页面跳转的几种方式
2012-02-28 19:20 1404第一种: <script languag ... -
Javascript 表单序列化
2012-02-24 20:52 735序列化: 序列化是将对象状态转换为可保持或传输的格式的过程。与 ...
相关推荐
javascript定义对象的四各方式。
主要介绍了JavaScript定义类和对象的方法,分别以函数方式与Object类方式实现,是javascript非常重要的技巧,需要的朋友可以参考下
Javascript是基于对象的脚本语言,理所当然会有对象概念的存在,通常我们在项目中都...所以定义对象可以让你仅仅记住对象名称极其作用,就会达到易控制,易维护和易扩展。在优化你的JS代码的同时也提升了你的开发水平。
javaScript定义对象的五种方法,个人感觉很好
可以看看这个例子: 代码如下: var a = ‘global’; (function () { alert(a); var a = ‘local’;...因为所有JavaScript函数都是一个对象。在函数里声明的变量可以看做这个对象的“类似属性”。对
javascript工厂方式定义对象.docx
Javascript对象定义的几种方式
JavaScript中的Math对象的与众不同之处在于,它是一个全局对象...在使用Math对象之前,既不需要将一个变量声明为Math对象,也不需要定义一个新的Math对象,JavaScript将自动地创建好Math对象,我们只须直接使用它即可。
JavaScript使用prototype定义对象类型
主要介绍了JavaScript定义全局对象的方法,结合实例形式分析了javascript全局对象的简单定义流程与实现技巧,需要的朋友可以参考下
javascriptEvent对象详解定义.pdf
在JavaScript中定义JavaScript对象有两种方式: 方式一: var Book ={ getBookName:function(){ alert("获取书的名称") ; } }; 方式二 var oBook = function(){}; oBook.getBookName=...
本人在带学生使用EXT框架时,我发现学生阅读Ext的sample代码有问题,特别是对JavaScript的面向对象编程的书写方式不熟悉,于是,写了四个sample来说明它现代JS编程的对类的定义方式、类继承的方式,以及怎样发展到...
JavaScript提供多个内建对象,比如String、Date、Array等等,使用对象前先定义,如下使用数组对象:Eg: var objectName =[]; objectName.length; 1、日期对象 (1) 定义一个时间对象 : var myDate=new Date(); ........
JAVASCRIPT中定义对象的几种方式.pdf
类定义了一类事物公共的行为和方法;而实例则是类的一个具体实现。 我们还知道,面向对象编程有三个重要的概念 - 封装、继承和多态。 但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript...
JavaScript 对象与数组参考大全 本文列举了各种JavaScript对象与数组,同时包括对上述每一对象或数组所完成工作的简短描述,以及与其相关的属性方法,以及事件处理程序,还注明了该对象或数组的父对象用户同样可能...