javascript 写类方式之四


Posted in Javascript onJuly 05, 2009

4、构造函数 + 原型 直接组装一个类;同一构造函数将组装出同一类型
通过前面几篇得知javascript写类无非基于构造函数 和原型 。既然这样,我们写个工具函数来写类。

/** 
* $class 写类工具函数之一 
* @param {Object} constructor 
* @param {Object} prototype 
*/ 
function $class(constructor,prototype) { 
var c = constructor || function(){}; 
var p = prototype || {}; 
c.prototype = p; 
return c; 
}

嗯。工具类写好了,来组装下:用构造函数来生成类实例的属性(字段),原型对象用来生成类实例的方法。
//构造函数 
function Person(name) { 
this.name = name; 
} 
//原型对象 
var proto = { 
getName : function(){return this.name}, 
setName : function(name){this.name = name;} 
} //组装 
var Man = $class(Person,proto); 
var Woman = $class(Person,proto);

ok,这时候已经得到了两个类Man,Woman。并且是同一个类型的。测试如下:
console.log(Man == Woman);//true 
console.log(Man.prototype == Woman.prototype);//true

创建对象看看,
var man = new Man("Andy"); 
var woman = new Woman("Lily"); 
console.log(man instanceof Man);//true 
console.log(woman instanceof Woman);//true 
console.log(man instanceof Person);//true 
console.log(woman instanceof Person);//true

ok一切如我们所期望。但是有个问题,下面代码的结果输出false,
console.log(man.constructor == Person);//false

这让人不悦:从以上的代码看出man的确是通过Man类new出来的 var man = new Man("Andy"),那么对象实例man的构造器应该指向Man,但为何事与愿违呢?
原因就在于$class中重写了Person的原型:c.prototype = p;
好了,我们把$class稍微改写下,将方法都挂在构造器的原型上(而不是重写构造器的原型),如下:
function $class(constructor,prototype) { 
var c = constructor || function(){}; 
var p = prototype || {}; 
// c.prototype = p; 
for(var atr in p) 
c.prototype[atr] = p[atr]; 
return c; 
}
Javascript 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 Javascript
react中的DOM操作实现
Jun 30 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
javascript 写类方式之三
Jul 05 #Javascript
javascript 写类方式之二
Jul 05 #Javascript
javascript 写类方式之一
Jul 05 #Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 #Javascript
jQuery DIV弹出效果实现代码
Jul 03 #Javascript
Javascript 遍历对象中的子对象
Jul 03 #Javascript
javascript web页面刷新的方法收集
Jul 02 #Javascript
You might like
PHP number_format() 函数定义和用法
2012/06/01 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
js中的replace方法使用介绍
2013/10/28 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
理解javascript模块化
2016/03/28 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
angular 服务随记小结
2019/05/06 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
python函数的5种参数详解
2017/02/24 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
python简单操作excle的方法
2018/09/12 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
python for 循环获取index索引的方法
2019/02/01 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
复古服装:RetroStage
2019/05/10 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
2014年网管工作总结
2014/12/11 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技