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下IE与FF兼容函数收集
Sep 17 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
ES6的解构赋值实例详解
May 06 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
vue实现图书管理系统
Dec 29 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
PHP使用者状态管理功能的应用
2006/10/09 PHP
如何做到多笔资料的同步
2006/10/09 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
yii用户注册表单验证实例
2015/12/26 PHP
javascript 上下banner替换具体实现
2013/11/14 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
node.js基础知识汇总
2020/08/25 Javascript
python多线程扫描端口示例
2014/01/16 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
python递归全排列实现方法
2018/08/18 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
python如何删除列为空的行
2020/07/17 Python
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
Servlet的生命周期
2013/08/25 面试题
综合素质的自我鉴定
2013/10/07 职场文书
个性大学生自我评价
2013/12/04 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
会计系毕业求职信
2014/08/07 职场文书
初婚未育证明样本
2014/10/24 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers