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 相关文章推荐
代码获取历史上的今天发生的事
Apr 11 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
vue el-upload上传文件的示例代码
Dec 21 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
PHP基础之运算符的使用方法
2013/04/28 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
vue2 前端搜索实现示例
2018/02/26 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
python通过ssh-powershell监控windows的方法
2015/06/02 Python
机器学习10大经典算法详解
2017/12/07 Python
selenium+python实现自动登录脚本
2018/04/22 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
捐书寄语赠言
2014/01/18 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
项目负责人岗位职责
2015/02/15 职场文书