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 相关文章推荐
Javascript面向对象之四 继承
Feb 08 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 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
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
jquery 插件 人性化的消息显示
2008/01/21 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
深入探究node之Transform
2017/07/20 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
Python求解任意闭区间的所有素数
2018/06/10 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
利用python修改json文件的value方法
2018/12/31 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
前台接待员岗位职责
2014/01/02 职场文书
活动宣传策划方案
2014/05/23 职场文书
计划生育宣传标语
2014/06/21 职场文书
党性分析自查总结
2014/10/14 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
Python实现天气查询软件
2021/06/07 Python