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 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
Angular4 中内置指令的基本用法
Jul 31 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
vue实例的选项总结
Jun 09 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
在WIN98下以apache模块方式安装php
2006/10/09 PHP
php htmlspecialchars加强版
2010/02/16 PHP
php session安全问题分析
2011/06/24 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
[IE&FireFox兼容]JS对select操作
2007/01/07 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
tab栏切换原理
2017/03/22 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
Linux Centos7.2下安装nodejs&npm配置全局路径的教程
2018/05/15 NodeJs
React中如何引入Angular组件详解
2018/08/09 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
Python join()函数原理及使用方法
2020/11/14 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
英文版银行求职信
2013/10/09 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
2014升学宴答谢词
2014/01/26 职场文书
销售2014年度工作总结
2014/12/08 职场文书
2015年药店工作总结
2015/04/20 职场文书
趣味运动会标语口号
2015/12/26 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技