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 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
比较node.js和Deno
Apr 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
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
Python实现简易Web爬虫详解
2018/01/03 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
自考生自我鉴定范文
2013/10/01 职场文书
法学毕业生自我鉴定
2013/11/08 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
环保项目建议书
2014/08/26 职场文书
国防教育标语
2014/10/08 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
党员评议自我评价
2015/03/03 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏