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小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
js post提交调用方法
Feb 12 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
js实现下拉框二级联动
Dec 04 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
vue项目多环境配置(.env)的实现
Jul 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
用PHP读注册表
2006/10/09 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
JS 控制CSS样式表
2009/08/20 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
简单介绍Python中的JSON使用
2015/04/28 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
Python生成随机密码的方法
2017/06/16 Python
想学python 这5本书籍你必看!
2018/12/11 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
自荐信结尾
2013/10/27 职场文书
校本教研工作制度
2014/01/22 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
导游词之清晏园
2019/11/22 职场文书