注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

snoopyxdy的博客

https://github.com/DoubleSpout

 
 
 

日志

 
 

关于javascript的继承  

2011-06-23 17:13:09|  分类: web前端技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
关于继承的一些想法和效率提高,代码很简单,但是很能说明问题!在实际项目中应用很多!

1、多重继承
有3个原型,分别处理学生的姓名,性别和年龄(当然是比较复杂的处理),而我们需要实例化的就是一个学生的原型,于是多重继承诞生了,我们看代码:

var s1 = function(name){
this.name = name;
}
var s2 = function(sex){
this.sex = sex;
}
var s3 = function(age){
this.age = age;
}
var Student = function(name, sex, age, score){
s1.call(this, name); 
s2.call(this, sex); 
s3.call(this, age); 
this.score = score;
}
Student.prototype.constructor = Student;
var s = new Student('jack', 'male', '12', '100');

alert(s.name);   //jack
alert(s.sex);     //male
alert(s.age);    //12
alert(s.score);   //100

这样我们就可以根据各个不同的功能模块分不同程序员独立开发,最后合并起来,实现了多重继承。
当然如果参数过多的话可以使用object参数来做。而且各个功能模块耦合度比较小,出现BUG也能很快定义到功能模块,修改其中某一个对其他没有影响。

2、原型链多层继承
原型链就是利用prototype属性来实现的,例如:原型1.prototype = new 原型2() ;
这样就可以利用    实例化1 = new 原型1();
实例化1就可以完全访问所有的原型1和原型2的方法,这里要注意在实例化时不要向原型函数传入参数,参数需要在实例化以后再定义。

var s1 = function(){
}
s1.prototype.getName = function(){alert(this.name)};
var s2 = function(){
}
s2.prototype =new s1();
s2.prototype.constructor = s2;
s2.prototype.getSex = function(){alert(this.sex)};
var s3 = function(){
}
s3.prototype = new s2();
s3.prototype.constructor = s3;
s3.prototype.getAge = function(){alert(this.age)};
var s = new s3();
s.name = 'jack';
s.sex = 'male';
s.age = '22';
s.getName();  //jack
s.getSex();    //male
s.getAge();    //22
这样通过prototype也实现了多层继承,不过个人感觉没有上面多重继承来的直观。不过最好的办法是2者齐上阵。

2、混合模式继承
我们可以做如下2个实验,以下2个代码块充分说明了以上2种模式的优劣,其实代码块2已经是混合模式了。
代码块1:
var s1 = function(name){
this.name = name;
this.getName = function(){
alert(this.name);
}
}
var o1 = new s1('jack');
var o2 = new s1('marry');
alert(o1.getName === o2.getName);   //false;

代码块2:
var s1 = function(name){
this.name = name;
}
s1.prototype.getName = function(){
alert(this.name);
}
var o1 = new s1('jack');
var o2 = new s1('marry');
alert(o1.getName === o2.getName);   //true;

我们来分析一下结果,第一种情况,将s1的getName方法存放在实例中,这样以后每实例化一个新对象都将生成不同的getName()方法,而如果将getName()方法添加到s1原型的原型链中后(也有人称之为反射,借鉴与JAVA),每实例化一个新的对象调用的都还是同一个getName()方法,这样正是我们所需要的,可以更少的占用内存资源提高运行效率。
如果全部使用prototype方式来进行继承的话又不能在实例化的同时传参,所以两者混合模式是最常用的方式,我们看代码:

var s1 = function(name){
this.name = name;
}
s1.prototype.getName = function(){alert(this.name)};
var s2 = function(sex){
this.sex = sex;
}
s2.prototype =new s1();
s2.prototype.getSex = function(){alert(this.sex)};
var s3 = function(age){
this.age = age
}
s3.prototype = new s2();
s3.prototype.getAge = function(){alert(this.age)};

var s4 = function(name, sex, age){
s1.call(this, name);
s2.call(this, sex);
s3.call(this, age);
}
s4.prototype = new s3();
s4.prototype.constructor = s4;
var s = new s4('jack', 'male', '25');
s.getName();   //jack
s.getSex();    //male
s.getAge();    //25

这样3重常用的继承方法介绍完毕了,混合模式适合一些比较大型javascript开发,频繁的实例化原型,可以提高运行效率。

补充一下:
对于一些私有方法,比如只想给类调用不想给实例调用的方法可以写在 function 内部:
例如:
var s1 = function(){
var a = function(){
...
}
this.b = function(){}
}
var x = new s1();  
var y = new s1();
alert(x.b === y.b) //false
这样y和x都无法直接调用a这个函数。但是这样会造成内存浪费。每实例化一个 s1,函数a和this.b方法都会占用额外内存,所以我们可以这样改写:

var s1 =function(){
function a(){
...
}
    return function(){
        this.b = function(){}
        }
}
var x = new s1();  
var y = new s1();
alert(x.b === y.b) //true;

大功告成了,这样a方法可以拿到实例化时的参数和运行环境,而b方法并没有因为多次实例化而浪费内存。



暂且先写到这里吧,以后碰到再补充吧~
有兴趣的朋友可以电邮联系:snoopyxdy@163.com
  评论这张
 
阅读(734)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016