JavaScript高级程序设计 扩展--关于动态原型


Posted in Javascript onNovember 09, 2010

但是作者Nicholas C. Zakas在【动态原型】方式创建对象的时候没有深究可能会存在的问题和解决方案。而仅仅在继承的时候对【动态原型】的瓶颈作了说明。即在作子类继承的时候,不能通过动态原型的方式来实现。

原文大致如下:
继承机制不能采用动态化的原因是:prototype对象的唯一性。实例代码:

function A (i) { 
this.a = i; 
if (typeof A._init == 'undefined') { 
A.prototype.func = function () { 
return 0; 
} 
A._init = 1; 
} 
} 
function subA (j) { 
A.call(this, 1); 
this.j = j; 
if (typeof subA._init == 'undefined') { 
subA.prototype = new A(); 
subA.prototype.func_sub = function () { 
return ++j; 
} 
subA._init = 1; 
} 
} 
var sub_a = new subA(1); 
alert(sub_a.func_sub()); //error: sub_a.func_sub is not a function

Nicholas解释说在代码运行前,对象已被实例,并与prototype联系,在当前对prototype对象替换不会对它产生任何影响,即当前的替换是访问不到的,只有未来对象的实例才会反映出这种改变。于是第一个实例对象就会不正确。但第二个及以后的子类实例都没问题。
解决方法就是在构造函数外赋予新的prototype对象:
function A (i) { 
this.a = i; 
if (typeof A._init == 'undefined') { 
A.prototype.func = function () { 
return 0; 
} 
A._init = 1; 
} 
} 
function subA (j) { 
A.call(this, 1); 
this.j = j; 
if (typeof subA._init == 'undefined') { 
subA.prototype.func_sub = function () { 
return ++j; 
} 
subA._init = 1; 
} 
} 
subA.prototype = new A(); 
var sub_a = new subA(1); 
alert(sub_a.func_sub()); //2

可惜这违反了我们为什么使用动态原型的初衷。
使用动态原型的初衷本来就是要让构造函数能“统一江山”,在视觉上让人觉得原型方法是类构造的一部分。

以上是《JavaScript高级程序设计》中对动态原型继承小节的大概内容。
<! -- ========== 分割线 ============ -->

可是Nicholas在先前的章节讲对象构造的【动态原型】方式中,似乎忘了提这个同样的问题。我们看看上文中最后一个例子:

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; 
} 
} 
var obj1 = new Obj('aa'); 
var obj2 = new Obj('bb'); 
obj1.showName(); //error: is not a function 
obj2.showName(); // bb;

是的,这个问题其实和子类继承中出现的问题如出一辙,prototype在当前的替换是不会对该对象有任何影响的,只有在未来的实例中可见。如果按照Nicholas处理动态原型继承的方式中说的一样,那就意味着只能在构造函数外边重新赋予prototype对象。那么这不就成了【构造函数/原型混合】方式了吗?所谓的【动态原型】方式也就不存在了...

其实我们可以想想,为什么在【构造函数/原型混合】这种已经基本没有副作用的构建对象方式后面还要在写一节【动态原型】方式。作者的意图无非就是想让构造函数在视觉上更为统一么。其实仅仅要视觉上的统一可以不用动态原型的。

var Obj = function () { 
function __initialize (name) { 
this.name = name; 
this.flag = new Array('A', 'B'); 
} 
__initialize.prototype = { 
showName : function () { 
alert(this.name); 
}, 
showFlag : function () { 
alert(this.flag); 
} 
} 
return __initialize; 
}(); 
var obj1 = new Obj('aa'); 
var obj2 = new Obj('bb'); 
obj1.showName(); // aa 
obj2.showName(); // bb

其实上面的方式就可以算是视觉的统一了,Obj的构造函数内通过__initialize来初始化属性,通过__initialize.prototype原型初始化方法。只不过稍微有点“小作弊”的感觉,__initialize代理了Obj的初始化...

下面是来自tangoboy的“构造类”的封装,其实思路和上面基本一致,唯一不同的是他把属性也用原型方式创建了,同时把初始化属性和方法都扔到了构造函数参数对象里。方便自定义:

/* == form tangoboy == */ 
window['$Class'] = { 
//创建一个类 混合构造函数/原型方式 
create: function(config) { 
var obj = function(){},config = config||{}; 
//过滤构造方法和原型方法 
obj = obj.prototype.constructor = config["__"]||obj; 
delete config["__"]; 
obj.prototype = config; 
return obj; 
} 
} 
/* -- eg -- */ 
var man = $Class.create({ 
__ : function (name) { 
this.name = name; 
}, 
sex : 'male', 
showName : function () { 
alert(this.name); 
} 
}); 
var me = new man('ru'); 
me.showName(); //ru

其实如果硬要追求视觉的统一也可以不用动态原型的方式。说到底看看上面的思路,已经回溯到了我们最常用的“类构造”方式:
var Class = { 
create : function () { 
return function () { 
this.initialize.apply(this, arguments); 
} 
} 
}

相信上面这段代码大家或许都不会陌生,如果细究下去,会发现其实和上面的代码都一致,用initialize函数作了初始化的代理,从而完成了视觉的统一。
Javascript 相关文章推荐
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
jquery remove方法应用详解
Nov 22 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
使用jQuery实现购物车
Oct 29 jQuery
关于JavaScript定义类和对象的几种方式
Nov 09 #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
You might like
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
python实现自动发送邮件
2018/06/20 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
python 整数越界问题详解
2019/06/27 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
使用Django清空数据库并重新生成
2020/04/03 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
internal修饰符起什么作用
2013/12/16 面试题
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
高中校园广播稿3篇
2014/09/29 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
工程部主管岗位职责
2015/02/12 职场文书
教师工作态度自我评价
2015/03/05 职场文书