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 相关文章推荐
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
javascript document.execCommand() 常用解析
2009/12/14 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
Sanic框架流式传输操作示例
2018/07/18 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
使用pandas读取文件的实现
2019/07/31 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
大学生毕业自荐信
2013/10/10 职场文书
自主实习接收函
2014/01/13 职场文书
无犯罪记录证明
2014/09/19 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
青岛海底世界导游词
2015/02/11 职场文书
Python first-order-model实现让照片动起来
2022/06/25 Python