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的360图片展示实现代码
Jun 14 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 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
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
文员个人求职自荐信
2013/09/21 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
法律进社区实施方案
2014/03/21 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书