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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 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面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
php从字符串创建函数的方法
2015/03/16 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
python实现感知器算法详解
2017/12/19 Python
python的socket编程入门
2018/01/29 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
Django如何使用redis作为缓存
2020/05/21 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
python 实现性别识别
2020/11/21 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang