繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript学习笔记8 用JSON做原型
- Javascript
- 一个简单的收缩菜单效果
- HTML-CSS群中单选引发的“事件”
- 打开超链需要“确认”对话框的方法
- 用js实现网页上模仿桌面右键菜单
- 可以文本显示的公告栏的js代码
- [原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
- 极致之美：百行代码实现全新智能语言
- 表单(FORM)的一些实用效果代码
- [原创]提供复制本站内容时出现,该文章转自等字样的js代码
- javascript中巧用“闭包”实现程序的暂停执行功能
- 给网站上的广告“加速”显示的方法
- [原创]jser必看的破解javascript各种加密的反向思维方法
- 用javascript代替marquee的滚动字幕效果代码
- 静态页面下用javascript操作ACCESS数据库(读增改删)的代码
- [原创]由亿起发(eqifa.com)的页面发现顶部的http://16a.us/8.js想到的js解密
- [原创]站长必须要知道的javascript广告代码
- js defineSetter -给js的 "class"自动增加一个set的属性(方法)
- Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例
- WordPress 插件：CoolCode使用方法与下载
- 文档处理系列：随时更新
Javascript学习笔记8 用JSON做原型
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-20 浏览: 247 ::
收藏到网摘: n/a
在Javascript学习笔记5 类和对象中，我简单地提到了利用JSON去构造一个对象。 代码如下：
复制代码 代码如下:
<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()就可以了！
评论 (0) All
