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 相关文章推荐
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP页面中文乱码分析
2013/10/29 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
python查询mysql,返回json的实例
2018/03/26 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
python3.6实现学生信息管理系统
2019/02/21 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
python lambda的使用详解
2021/02/26 Python
什么是URL
2015/12/13 面试题
工程造价管理专业大专生求职信
2013/10/06 职场文书
售后专员岗位职责
2013/12/08 职场文书
餐饮管理自我介绍信
2014/01/15 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
租房协议书范文
2014/08/20 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
浅析Python实现DFA算法
2021/06/26 Python
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技