js类式继承的具体实现方法


Posted in Javascript onDecember 31, 2013

在开始摆弄代码之前,应该搞清楚使用继承的目的和能带来什么好处。一般来说,在设计类的时候,我们希望能减少重复性的代码,并且尽量弱化类之间的耦合。而要做到这两者都兼顾是很难的,我们需要根据具体的条件和环境下决定我们应该采取什么方法。根据我们对面向对象语言中继承的了解,继承会带类直接的强耦合,但js由于其特有的灵活性,可以设计出强耦合和弱耦合,高效率和低效率的代码。而具体用什么,看情况。

下面提供js实现继承的三种方法:类式继承,原型继承,掺元类。这里先简述类式继承,后两种在往后的随便中简述,请多多关注、指导,谢谢。

类式继承。

js类式继承的实现依靠原型链来实现的。什么是原型链?js中对象有个属性prototy,这个属性返回对象类型的引用,用于提供对象的类的一组基本功能。

貌似对prototype有印象,对了,我们经常这样用代码。

var Person = function(){    
    this.name = "liyatang";
};
Person.prototype = {
    //可以在这里提供Person的基本功能
    getName : function(){
        return this.name;
    }
}

我们把类的基本功能放在prototype属性里,表示Person这个对象的引用有XXX功能。

在理解原型后,需要理解下什么是原型链。在访问对象的某个成员(属性或方法)时,如果这个成员未见于当前对象,那么js会在prototype属性所指的那个对象中查找它,如果还没有找到,就继续到下一级的prototype所指的对象中查找,直至找到。如果没有找到就会返回undifined。

那么原型链给我们什么提示呢?很容易联想到,原型链意味着让一个类继承另一个类,只需将子类的prototype设置为指向父类的一个实例即可。这就把父类的成员绑定到子类上了,因为在子类上查找不到某个成员时会往父类中查找。(以上这两段用词不严谨,只在用通俗易懂的言语描述)

下面我们需要个Chinese类,需要继承Person类的name和getName成员。

var Chinese = function(name, nation){
        //继承,需要调用父类的构造函数,可以用call调用,this指向Chinese
    //使Person在此作用域上,才可以调用Person的成员
    Person.call(this,name);
    this.nation = nation;
};
Chinese.prototype = Person.prototype;
//这里不可和以前一样,因为覆盖掉了prototype属性
//Chinese.prototype = {
//  getNation : function(){
//      return this.nation;
//  }
//};
//以后的方法都需要这样加
Chinese.prototype.getNation = function(){
        return this.nation;
};

继承关系就建立了,我们这样调用它

var c = new Chinese("liyatang","China");
alert(c.getName());// liyatang

于是类式继承就这样完成了。难道真的完成了嘛,用firebug在alert那里设断点,会发现原来的Person.prototype被修改了,添加了getNation方法。
js类式继承的具体实现方法

这是因为在上面的代码Chinese.prototype = Person.prototype; 这是引用类型,修改Chinese同时也修改了Person。这本身就是不能容忍的,且使类之间形成强耦合性,这不是我们要的效果。

我们可以另起一个对象或实例化一个实例来弱化耦合性。

//第一种
//Chinese.prototype = new Person();
//第二种
//var F = function(){};
//F.prototype = Person.prototype;
//Chinese.prototype = F.prototype;

这两种方法有什么区别呢。在第二种中添加了一个空函数F,这样做可以避免创建父类的一个实例,因为有可能父类会比较庞大,而且父类的构造函数会有一些副作用,或者说会执行大量的计算任务。所以力荐第二种方法。

到此,完了嘛,还没有!在对象的属性prototype下面有个属性constructor,它保存了对构造特定对象实例的函数的引用。根据这个说法Chiese.prototype.constructor应该等于Chinese,实际上不是。

回忆之前在设置Chiese的原型链时,我们把Person.prototype 覆盖掉了Chiese.prototype。所以此时的Chiese.prototype.constructor是Person。我们还需要添加以下代码

//对这里的if条件不需要细究,知道Chinese.prototype.constructor = Chinese就行
if(Chinese.prototype.constructor == Object.prototype.constructor){
    Chinese.prototype.constructor = Chinese;
}

整理全部代码如下

var Person = function(name){
    this.name = name;
};
Person.prototype = {
    getName : function(){
        return this.name;
    }
};var Chinese = function(name, nation){
    Person.call(this,name);
    this.nation = nation;
};
var F = function(){};
F.prototype = Person.prototype;
Chinese.prototype = F.prototype;
if(Chinese.prototype.constructor == Object.prototype.constructor){
    Chinese.prototype.constructor = Chinese;
}
Chinese.prototype.getNation = function(){
        return this.nation;
};
var c = new Chinese("liyatang","China");
alert(c.getName());

如果可以把继承的代码放在一个函数里,方便代码复用,最后整理代码如下

function extend(subClass,superClass){
    var F = function(){};
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;
    subClass.superclass = superClass.prototype; //加多了个属性指向父类本身以便调用父类函数
    if(superClass.prototype.constructor == Object.prototype.constructor){
        superClass.prototype.constructor = superClass;
    }
}var Person = function(name){
    this.name = name;
};
Person.prototype = {
    getName : function(){
        return this.name;
    }
};
var Chinese = function(name, nation){
    Person.call(this,name);
    this.nation = nation;
};
extend(Chinese, Person);
Chinese.prototype.getNation = function(){
        return this.nation;
};
var c = new Chinese("liyatang","China");
alert(c.getName());

发表后修改:

在一楼的评论下,我对那个extend函数又有新的看法。之前在讨论如何设置原型链时提出了两种方法

//第一种
//Chinese.prototype = new Person();
//第二种
//var F = function(){};
//F.prototype = Person.prototype;
//Chinese.prototype = F.prototype;

虽然第二种减少了调用父类的构造函数这条路,但在设计Chinese类时用了Person.call(this,name);这里也相当于调用了父类的构造函数。

然而用第一种方法的话可以减少在Chinese中再写Person.call(this,name);,这部分代码在子类中往往会遗忘。不妨把这种功能代码放在了extend里。就只写

Chinese.prototype = new Person();也达到同样的目的:耦合不强。

但遗忘的一点是,Chinese.prototype = new Person();这样写对嘛。答案是不对!很明显 new Person()需要传一个name参数的。我们不可能在extend函数里做这部分工作,只好在Chinese类里调用父类的构造函数了。这样也符合面向对象的思路。

所以,还是力荐用第二种方法。

第一次这样写有关技术类的文章,基本是按自己的思路铺展开来,难免会有一些没有考虑到的地方和解释的不清楚的地方,望留言反馈,谢谢。

Javascript 相关文章推荐
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
javascript简单链式调用案例分析
May 10 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
利用javascript判断文件是否存在
Dec 31 #Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 #Javascript
屏蔽IE弹出"您查看的网页正在试图关闭窗口,是否关闭此窗口"的方法
Dec 31 #Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 #Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 #Javascript
jquery遍历select元素(实例讲解)
Dec 31 #Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 #Javascript
You might like
基于Zend的Captcha机制的应用
2013/05/02 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
显示、隐藏密码
2006/07/01 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
javascript运动详解
2015/07/06 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
Python中random模块用法实例分析
2015/05/19 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
python中format()函数的简单使用教程
2018/03/14 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
Tensorflow 实现释放内存
2020/02/03 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
数据员岗位职责
2013/11/19 职场文书
公积金单位接收函
2014/01/11 职场文书
幼儿园门卫制度
2014/01/29 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
Oracle中DBLink的详细介绍
2022/04/29 Oracle