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 相关文章推荐
文本加密解密
Jun 23 Javascript
Javascript读取cookie函数代码
Oct 16 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
初品cakephp 入门基础
2012/02/16 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
动态创建类实例代码
2009/10/07 Python
Python中super()函数简介及用法分享
2016/07/11 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
护理个人求职信范文
2014/01/08 职场文书
法人委托书的范本格式
2014/09/11 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
艺术节开幕词
2015/01/28 职场文书
党支部综合考察意见
2015/06/01 职场文书
医院消毒隔离制度
2015/08/05 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android