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 相关文章推荐
js 操作符实例代码
Oct 24 Javascript
js indexOf()定义和用法
Oct 21 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
JS中的作用域链
Mar 01 Javascript
AngularJs 常用的过滤器
May 15 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 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/01 无线电
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
php函数连续调用实例分析
2015/07/30 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
小试JQuery的AutoComplete插件
2011/05/04 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
Python随机读取文件实现实例
2017/05/25 Python
Django rest framework实现分页的示例
2018/05/24 Python
django如何通过类视图使用装饰器
2019/07/24 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
建筑人员岗位职责
2013/12/25 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
铁路个人事迹材料
2014/01/30 职场文书
党支部对照检查材料
2014/08/25 职场文书
个人委托书怎么写
2014/09/17 职场文书
员工工作能力评语
2014/12/31 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
廉洁自律证明
2015/06/24 职场文书
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs