Javascript学习笔记8 用JSON做原型


Posted in Javascript onJanuary 11, 2010

代码如下:

<script type="text/javascript"> 
var People = { 
name: "kym", 
age: 21, 
SayHello: function () { 
alert("Hello,My name is " + this.name + ".I am " + this.age); 
} 
} 
alert(People.name); 
People.SayHello(); 
</script>

但是我们是不能重用这个对象的,我们如何把这个对象作为原型的呢?

首先,在一个JSON对象有一个构造方法是不可能的了,那么我们就做一个简单的“工厂”吧,写一个方法来专门负责创建。

<script type="text/javascript"> 
var People = { 
Create: function (name, age) { 
this.name = name; 
this.age = age; 
}, 
SayHello: function () { 
alert("Hello,My name is " + this.name + ".I am " + this.age); 
} 
} 
People.Create("kym", 21); 
People.SayHello(); 
</script>

但是通过这个方法我们却发现,我们没有办法用People作为原型,让我们回顾一下:Javascript学习笔记7——原型链的原理 这篇文章,我们想一下这个过程:

var p=new People();==>p.__proto__=People.prototype。于是当我们p.SayHello()的时候就会去People.prototype中去找,结果什么都找不到。

如果可以People.prototype.SayHello=function(){}就可以解决这个问题。但是我们知道,只有function才可以有prototype。

那么我们想想之前的推导公式,怎么样能让p.SayHello()呢?如果可以p.__proto__=People就好了。那么我们想个办法:

既然在new的时候,某个对象的__proto__只能等于某个函数的prototype,我们设置一个函数X,令p.__proto__=X.prototype,我们再令X.prototype=People。这样的关系是这样:

<script type="text/javascript"> 
var People = { 
Create: function (name, age) { 
this.name = name; 
this.age = age; 
}, 
SayHello: function () { 
alert("Hello,My name is " + this.name + ".I am " + this.age); 
} 
}; var X = function () { }; 
X.prototype = People; 
var p = new X(); 
p.Create("kym", 21); 
p.SayHello(); 
</script>

这样就相当于用X做了一个中间变量,使得我们可以访问JSON对象的内部属性。但是这样是不是不太优雅呢?我们每次创建一个对象时,都需要来写这样一个辅助的函数。那好,我们就把这个过程封装起来:
var Factory = { 
CreatePeople : function (className,name,age) { 
var temp = function () { 
className.Create(name, age); 
}; 
temp.prototype = className; 
var result = new temp(); 
return result; 
} 
}; 
var people = Factory.CreatePeople(People,"kym",21); 
people.SayHello();

但是这样也有一个缺点,就是每次我增加一个类,就需要向Factory里注册一个新方法,这样是很麻烦的,我在很久以前的 玩转方法:call和apply 中说过关于call和apply的区别,因为这里的参数不固定,我们不可能一一列举,因此我们在这里可以用apply来改善这个方法:
<script type="text/javascript"> 
var People = { 
Create: function (name, age) { 
this.name = name; 
this.age = age; 
}, 
SayHello: function () { 
alert("Hello,My name is " + this.name + ".I am " + this.age); 
} 
}; var Factory = { 
Create: function (className, params) { 
var temp = function () { 
className.Create.apply(this, params); 
}; 
temp.prototype = className; 
var result = new temp(); 
return result; 
} 
}; 
var people = Factory.Create(People,["kym",21]); 
people.SayHello(); 
</script>

这样,一个完整的创建类就诞生了!那么我们每次创建“类”时就都可以用JSON来做了,然后用户每次都统一来调用Factory.Create()就可以了!
Javascript 相关文章推荐
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 #Javascript
Javascript学习笔记6 prototype的提出
Jan 11 #Javascript
Javascript学习笔记5 类和对象
Jan 11 #Javascript
Javascript学习笔记4 Eval函数
Jan 11 #Javascript
Javascript学习笔记2 函数
Jan 11 #Javascript
Javascript学习笔记1 数据类型
Jan 11 #Javascript
IE bug table元素的innerHTML
Jan 11 #Javascript
You might like
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
移动端界面的适配
2017/01/11 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
2014小学植树节活动总结
2014/03/10 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
妇女干部培训方案
2014/05/12 职场文书
工地宣传标语
2014/06/18 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
颐和园的导游词
2015/01/30 职场文书
详解SQL报错盲注
2022/07/23 SQL Server