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 + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 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
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
Python实现PS图像调整黑白效果示例
2018/01/25 Python
python模块之paramiko实例代码
2018/01/31 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
药剂专业学生求职信范文
2013/12/28 职场文书
最新的咖啡店创业计划书
2013/12/30 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
数学教师个人工作总结
2015/02/06 职场文书
2015年人事科工作总结
2015/04/28 职场文书