Javascript学习笔记8用JSON做原型
2023-06-13 09:14:15 时间
代码如下:
复制代码代码如下:
<scripttype="text/javascript">
varPeople={
name:"kym",
age:21,
SayHello:function(){
alert("Hello,Mynameis"+this.name+".Iam"+this.age);
}
}
alert(People.name);
People.SayHello();
</script>
但是我们是不能重用这个对象的,我们如何把这个对象作为原型的呢?
首先,在一个JSON对象有一个构造方法是不可能的了,那么我们就做一个简单的“工厂”吧,写一个方法来专门负责创建。
<scripttype="text/javascript">
varPeople={
Create:function(name,age){
this.name=name;
this.age=age;
},
SayHello:function(){
alert("Hello,Mynameis"+this.name+".Iam"+this.age);
}
}
People.Create("kym",21);
People.SayHello();
</script>
但是通过这个方法我们却发现,我们没有办法用People作为原型,让我们回顾一下:Javascript学习笔记7——原型链的原理这篇文章,我们想一下这个过程:
varp=newPeople();==>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。这样的关系是这样:
<scripttype="text/javascript">
varPeople={
Create:function(name,age){
this.name=name;
this.age=age;
},
SayHello:function(){
alert("Hello,Mynameis"+this.name+".Iam"+this.age);
}
};
varX=function(){};
X.prototype=People;
varp=newX();
p.Create("kym",21);
p.SayHello();
</script>
这样就相当于用X做了一个中间变量,使得我们可以访问JSON对象的内部属性。但是这样是不是不太优雅呢?我们每次创建一个对象时,都需要来写这样一个辅助的函数。那好,我们就把这个过程封装起来:
varFactory={
CreatePeople:function(className,name,age){
vartemp=function(){
className.Create(name,age);
};
temp.prototype=className;
varresult=newtemp();
returnresult;
}
};
varpeople=Factory.CreatePeople(People,"kym",21);
people.SayHello();
但是这样也有一个缺点,就是每次我增加一个类,就需要向Factory里注册一个新方法,这样是很麻烦的,我在很久以前的玩转方法:call和apply中说过关于call和apply的区别,因为这里的参数不固定,我们不可能一一列举,因此我们在这里可以用apply来改善这个方法:
<scripttype="text/javascript">
varPeople={
Create:function(name,age){
this.name=name;
this.age=age;
},
SayHello:function(){
alert("Hello,Mynameis"+this.name+".Iam"+this.age);
}
};
varFactory={
Create:function(className,params){
vartemp=function(){
className.Create.apply(this,params);
};
temp.prototype=className;
varresult=newtemp();
returnresult;
}
};
varpeople=Factory.Create(People,["kym",21]);
people.SayHello();
</script>
这样,一个完整的创建类就诞生了!那么我们每次创建“类”时就都可以用JSON来做了,然后用户每次都统一来调用Factory.Create()就可以了!
相关文章
- javascript 基础_JavaScript高级编程
- javascript系列学习笔记-this
- JavaScript学习总结(二十)——Javascript非构造函数的继承详解编程语言
- 《JavaScript DOM编程艺术》学习笔记(二)详解编程语言
- JavaScript学习笔记(四)
- Javascript笔记一js以及json基础使用说明
- JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
- javascript学习笔记(二)鼠标经过时,改变div块的背景色的代码
- javascript学习笔记(四)倒计时程序代码
- javascript学习笔记(五)正则表达式
- JavaScript高级程序设计客户端存储学习笔记
- javascript权威指南学习笔记之javascript数据类型
- javascript权威指南学习笔记之变量作用域分享
- Javascript异步加载详解(浏览器在javascript的加载方式)
- javascript学习笔记(十)js对象继承
- javascript学习笔记(十四)window对象使用介绍
- javascript学习笔记(十九)节点的操作实现代码
- javascript学习笔记(二十)获得和设置元素的特性(属性)
- 重温JavaScript中的正则表达式js学习笔记
- 深入理解javascript学习笔记(一)编写高质量代码
- JavaScript高级程序设计(第3版)学习笔记6初识js对象
- JavaScript学习笔记之JS函数