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 相关文章推荐
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
jQuery表单验证之密码确认
May 22 jQuery
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
vue vant中picker组件的使用
Nov 03 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
php创建类并调用的实例方法
2019/09/25 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
浅析Python的Django框架中的Memcached
2015/07/23 Python
python字符串判断密码强弱
2020/03/18 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
Delphi CS笔试题
2014/01/04 面试题
学期自我鉴定范文
2013/10/01 职场文书
考试诚信承诺书
2014/05/23 职场文书
安全环保标语
2014/06/09 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL
Python实现数据的序列化操作详解
2022/07/07 Python