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 相关文章推荐
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
关于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
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
python创建学生成绩管理系统
2019/11/22 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
IBatis持久层技术
2016/07/18 面试题
高中生家长会演讲稿
2014/01/14 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
园艺师求职信
2014/03/10 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
前台接待岗位职责
2015/02/03 职场文书
初中政教处工作总结
2015/08/12 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
python可视化之颜色映射详解
2021/09/15 Python