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之锁定表格栏位
Jun 29 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
如何手写简易的 Vue Router
Oct 10 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 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
汉字转化为拼音(php版)
2006/10/09 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
jquery自定义表格样式
2015/11/23 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
自己使用总结Python程序代码片段
2015/06/02 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
深入浅析Python中的迭代器
2019/06/04 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
Python如何定义有可选参数的元类
2020/07/31 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
水务局局长岗位职责
2013/11/28 职场文书
个人求职信范例
2014/01/29 职场文书
四下基层实施方案
2014/03/28 职场文书
医学专业大学生求职信
2014/07/12 职场文书
英语系毕业生求职信
2014/07/13 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
预备党员介绍人意见
2015/06/01 职场文书